Category: Верстка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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