Создание: работы по редизайну вебсайта завершаются


Насколько сложна работа по редизайну сайтов? Если вы хотите обновить внешний облик блога или форума, сделать его дизайн более красивым или удобным, помните: почти наверняка это потянет за собой изменения не только в верстке, но и в других частях. Редизайн сайта, новый внешний вид и новая верстка.
Обновленный дизайн
Развитие блогов
Создание сайтов

Редизайн сайта, новый внешний вид и новая верстка

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

Первым делом была выбрана идея внешнего вида шапки в стиле советского ретро: опытный пожилой SEOшник поучает юного пионера (новичка). Если кто помнит оригинальное название этой картины, то оно звучит так: "Сбылись мечты народные", и это тоже символично. В свете этого серьезная эмблема сайта, которая была раньше, оказалась как-то не очень уместной. Было решено сделать ее в виде коллажа из двух элементов: логотипа SEO в виде шестеренок, что символизирует индустриализацию (согласно основной картинке в правом верхнем углу), и рисунка шамана с бубном, что весьма удачно характеризует особенности нашей деятельности. Эмблема вебсайтв получилась довольно компактной, она расположена в левом верхнем углу шаблона.

Особенности верстки HTML-кода вебсайта COM-SEO.RU

Верстка происходила таким образом: исходная картинка была разрезана на куски в Фотошопе, которые затем компоновались при помощи примитивного текстового редактора в статический HTML-файл на компьютере. Как и предполагалось, реализовать руку, закрывающую совсем небольшой кусочек анонса, оказалось не так-то просто. Оказалось, что то решение, которое отлично смотрится в Мозилле, разъезжается на куски в IE7. В итоге все-таки удалось сверстать HTML-файл, который одинаково смотрится во всех браузерах. Редизайн осложнялся тем, что при "резиновом" шаблоне весьма непросто обеспечить не только устойчивость макета, но и его эстетичность. Выходом послужила идея сделать анонс не масштабируемым, то есть, таким, который не растягивается по горизонтали, а съезжает весь целиком, единым блоком.

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

Оптимальная структура заголовков: TITLE - для ПС, H1 - для людей

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

Трудозатраты на самостоятельный редизайн сайта

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

Если хочешь сделать что-то хорошо - сделай это сам. Этот тезис еще никто не отменял. У нас на полный редизайн от идеи до конечного воплощения в код ушло порядка двух недель работы примерно по паре часов в день. 5 марта 2013 года редизайн был завершен, спустя месяц можно будет оценить, как отнеслись к этому поисковые системы. Сюда же включено время на обдумывание, как сделать, на переделывание и выкидывание неудачных конструкций. Зато в ходе верстки были получены навыки по расположению проблемных и неочевидных частей шаблона, которые можно будет при случае применить. Таким образом, самостоятельный дизайн сайта - это не только конечный продукт на выходе, но еще и бесплатное самообучение всяким премудростям сайтостроения. А это дорогого стоит!

Редизайн сайта, новый внешний вид и новая верстка
|
SEO для вебсайта
Ссылка на страницу: http://com-seo.ru/redizayn-website-vneshniy-vid-verstka-viewdesign-438.html © 2013 Москва Россия