ArtShok. Сайтостроение и немного SEO

Уроки и примеры по CSS, jQuery. Советы по монетизации и продвижению сайтов


09.02

2009

Советы и секреты оптимизированной навигации

Добрый день! Это гостевой пост, и сегодня пишу его я - Данил. Я автор блога «Безумство одарённого студента». И сегодня я расскажу советы и секреты оптимизированной навигации. Приступим.

Советы и секреты оптимизированной навигации

“Если у вас есть свой сайт или собираетесь его сделать, то вы должны знать, что одной из наиболее важных вещей является навигация. У вас может быть один из лучших сайтов, но если там никто не может ничего найти и сориентироваться, то грош цена такому сайту. Вот я и решил написать такую статью, целью которой является рассказать 12 советов о том, как сделать более лёгкую навигацию для людей, и оптимизированную для поисковых роботов. 12 советов по оптимизации навигации сайта »

05.21

2009

Антиспам плагины для WordPress, которые работают

Антиспам плагины WordPress, которые работают Вас достал спам? Устали вычищать горы левых комментариев? Не хотите больше тратить свое время и нервы? Тогда мы идем к вам!

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

! Рекомендую только то, то проверено лично, и в данный момент настроено на этом сайте. Моя антиспам защита включает:

1. Akismet. Всем уже давно известен, но полностью от спама не спасает, поэтому желательно к нему доставить остальные плагины.

2. WP-SpamFree. Очень сильные плагин, который блокирует весь спам. Правда временами прихватывает и нормальные комментарии, но их же можно потом спасти. Согласитесь, что легче одобрить 1 комментарий, чем потом вычищать сотни ненужных. Плюс: работает без капчи

Антиспам плагины для WordPress, далее…

Бриф на сайт и дизайн сайта

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

Итак,

Бриф (от англ. brief) — краткая письменная форма согласительного порядка между рекламодателем и рекламистом, в которой прописываются основные параметры будущей рекламной кампании. (Wikipedia)

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

Скачать бриф на дизайн

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

04.15

2009

Основные поисковые запросы Google

Нужно не всем и не всегда, но если понадобится - вы знаете, где это лежит ;)

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

  • define:юзабилити - толковый словарь: выводит определение слова или фразы
  • spell:дакумент - проверка грамматики: автоматически проверяет правописание (если есть ошибка, то подсказывает правильное написание)
  • гимн россии filetype: mp3 - поиск по типам файлов: позволяет искать файлы по 12-ти форматам (mp3, doc, rtf, html, pdf и др.)
  • “погиб поэт” - точный запрос: заключайте запрос в кавычки, если требуется вывод результатов по точному запросу
  • верстка -полиграфия - исключение слова: позволяет исключить из запроса ненужную информацию, для этого используйте знак “-” (минус)
  • европа +столицы - принудительное включение слова: когда нужно принудительно включить слово в запрос (например, для повышения полезности/качества выдаваемой информации), используйте “+”
  • * для лисы - сокращение слова: если нужно найти фразу с неизвестным словом, используйте “*”
  • ноутбук Asus 15000…60000 - диапазон: поиск товара определенном марке в указанном ценовом диапазоне, верхняя и нижняя планка разделяются многоточием
  • safesearch: дурное воспитание - безопасный поиск: выдает результат поиска без эротического содержания
  • ~талант - поиск синонимов: если поставить знак “~” перед запросом, то помимо обычного поиска Google выведет и результаты с его синонимами
  • cache:art-shok.ru - копия страниц из кэша: выводит сохраненную страницу указанного сайта из кеша Google
  • link:art-shok.ru - список ссылающихся сайтов: выводит список сайтов, которые ссылаются на указанный (хм… как-то мало, надо заняться этим вопросом)
  • related:google.com - похожие сайты: выводит список сайтов, похожих по содержанию и тематике на указанный
  • info:art-shok.ru - информация о сайте: показывает информацию, которая есть у Google по данному ресурсу
  • site:art-shok.ru - проиндексированные страницы: выводит список проиндексированных страниц на сайте
  • rss каталоги site:art-shok.ru - поиск только по одному сайту: ищет по указанному запросу только в пределах указанного ресурса
  • allintext:примеры техдизайна - поиск только в текстах сайтов: поиск запроса в текстах сайтов (исключая заголовки или ссылки)
  • allintitle:реклама питер - поиск только по заголовкам: ищет слова, содержащиеся в теге title
  • intitle:реклама питер - поиск только по заголовкам: выводит страницы, в которых только то слово, которое расположено сразу после intitle, содержится в заголовке
  • allinurl:art des - поиск по ссылкам: ищет сайта, в URL которых есть искомый запрос
  • inurl:art des - поиск по ссылкам: слово, расположенное сразу после inurl (в даннмо примере art), будет найдено только в адресе страницы, остальные слова могут быть в любой части текста.

Как видим, поиск через google можно использовать еще и в качестве SEO-инструмента (например, поиск конкурентов по тайтлу или урл + список ссылающихся на них сайтов). Все остальное уже на ваше усмотрение.

04.02

2009

Инструкция по SEO-анализу сайта

Итак, прежде чем вы кинетесь продвигать свое драгоценное детище (а, возможно, и не свое вовсе), было бы неплохо (читай = обязательно) сначала провести экспресс-анализ.

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

10.16

2008

Что делать при финансовом кризисе?

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

Поэтому мы с вами сейчас пробежимся по этой не столь радостной теме, чтобы знать как себя вести с клиентами, ибо теперь они начнут деньги не просто экономить, а зажимать! Так что ищем способ все-таки получить заслуженные.. нет, не зелененькие, а родные деревянные.
Итак, 5 советов по преодолению кризиса

10.08

2008

Страница ошибок 404: как удержать посетителей

Ошибка 404 означает, что браузер не может найти на сервере запрашиваемый файл или страницу.

Наиболее распространенные причины пребывания посетителей на странице 404:

  • Неправильно набран адрес (URL)
  • Ссылка в поисковиках устарела
  • На вас ранее ссылались, но потом файл на сервере был переименован или перенесен в другое место, а ссылка осталась прежней
  • После обновления вы не до конца проверили сайт на наличие “битых” ссылок

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

10.02

2008

Как правильно поставить ссылки на Skype и ICQ

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

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

09.26

2008

70 советов по улучшения CSS кода

1.1 Кодинг: Начинаем

  • Когда дизайн готов, начните с пустой страницы. Добавьте заголовки, навигацию, пример содержимого, и футер, потом добавьте html разметку и только после этого CSS.
  • Сначала сбросьте стили по умолчанию. Часто нет необходимости задавать значение какого либо свойства, потому что есть значение по умолчанию. Некоторые любят делать Global white space reset, обнуляя отступы и поля всех элементов в самом начале файла стилей.
  • Используйте главный файл стилей. Одна из наиболее распространенных ошибок новичков в том, что они забывают сбросить стили по умолчанию, это является причиной несоответствия оформления в различных браузерах. Браузеры тут не причем, прежде чем начать писать CSS следует сбросить стили по умолчанию.

master.css


@import url("reset.css");
@import url("global.css");
@import url("flash.css");
@import url("structure.css");


<style type="text/css" media="Screen">
/*\*/ @import url("css/master.css"); /**/
</style>

  • Создайте библиотеку вспомогательных классов. Полезные для отладки они должны быть исключены в окончательной версии (разделяйте разметку и оформление). Можно использовать сразу несколько имен классов (<p class="floatLeft alignLeft width75">...</p>)


.width100 {width: 100%;}
.width75 {width: 75%;}
.width50 {width: 50%;}
.floatLeft {float: left;}
.floatRight {float: right;}
.alignLeft {text-align: left;}
.alignRight {text-align: right;}

остальные советы по улучшению CSS кода »

09.17

2008

25 советов по подборке и регистрации доменов

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

В этом случае еще хорошим примером может служить http://ice-clean.net/, доменное имя сайта сети химчисток “Айс-клин”. В частности мы видим привязку к чистоте по второй части - “clean”, а “ice” мы уже по умолчанию воспринимаем как “свежий”. Более того, благодаря рекламе одного из товаров по ТВ, высказывания “Айс!” и “Не айс!” стали аналогом признания хорошего (в нашем случае) или плохого качества соответственно.

Так что же надо учесть при регистрации очередного домена для своей компании или проекта. 25 советов по подбору доменов