Цитаты из книг автора «Анар Бабаев»

Во-вторых, задействуйте сервисы онлайн-тестирования, как то CrossBrowserTesting.com, BrowserShots.org, Browsera.com. • Валидный код – значит код с четкой, прозрачной структурой, который отвечает требованиям Консорциума Всемирной паутины (W3G), составляющего и внедряющего технические стандарты Интернета. Главный онлайн-сервис для проверки гипертекста на валидность расположен по адресу http://validator.w3.org. Чтобы протестировать CSS-код по тому же критерию, прибегните к другому инструменту: http://jigsaw.w3.org/css-validator/. Написаны и аналогичного назначения плагины для браузеров, и наипервейший из них – Firebug для Firefox. Роботы «Яндекса» и Google при обходе сайта с большим числом ошибок в коде наверняка проиндексируют сайт хуже, чем могли бы. Мелкие же несовершенства не криминальны и не грозят проседанием в поисковой выдаче, однако и их следует избегать. Наконец, все актуальнее микроформаты – стандарты семантической разметки HTML– и XHTML-страниц. С их помощью сайт структурируют и размечают так, чтобы роботы его индексировали с большей точностью, различая, где что лежит. Модель проста: определенным HTML-элементам присваиваются дополнительные атрибуты. В Рунете на конец 2013 года поддерживалось два основных вида семантической разметки – от Schema.org и от Microformats.org. Мы советуем вам остановить выбор на первом (см. блок «Полезно знать» – справочные материалы по ссылкам «Что такое Shema.org?» и «Что такое микроформаты?»). • И код, и контент сайта оптимизированы под Веб. Код – минималистичный и валидный, картинки – легкие, в формате. jpg или. png. Для подгонки изображений под выкладку в Интернет создано изрядное количество инструментов, как онлайновых (Picrecize.com, Smushit.com и пр.), так и офлайновых, включая внутренние опции фоторедакторов. У изображений должны быть заполнены теги alt и title (во втором в умеренном количестве указываются ключевые слова), название самого файла – вразумительное, понятное человеку, и не столь важно, написано оно по-английски или дано транслитом. Само собой, недопустимо использование взятых наобум из Сети картинок, тем более украденных с сайтов конкурентов.

Верстка представляет собой разделение графического макета (чаще всего в формате Photoshop —.psd) на составляющие и его сборку в веб-страницу средствами HTML и CSS.

Полезно знать «Пять причин для редизайна сайта»: http://www.cmsmagazine.ru/library/items/internet-marketing/five-reasons-for-redesign-site/ Подробно о редиректах для специалистов: http://htmlweb.ru/php/htaccess.php «301-й редирект: был ваш сайт – и сайта нет»: http://seopult.tv/programs/seo/301_redirekt_byl_vash_sayt_i_sayta_net/ Про инструменты для проверки сайтов: http://www.design-sites.ru/material/site-checking.php «Как изменить структуру сайта без потери позиций»: http://habrahabr.ru/company/seopult/blog/170915/ «Как удержать позиции сайта при смене CMS»: http://www.optimization.com.ua/articles/uderjat-pozicii-sajta.html «Переезд сайта на новый домен» («Яндекс. Помощь»): http://help.yandex.ru/webmaster/?id=1108951 «Как переместить сайт» («Справка Google», «Инструменты для веб-мастеров»): https://support.google.com/webmasters/answer/83105 «Восемь SEO-шагов, которые нужно сделать в ходе редизайна сайта»: http://www.optimism.ru/blog/vsem-seo-shagov-v-hode-redizajna-sajta/

Итак, ситуация: вся структура – иерархия каталогов, расширения файлов и т. д. – перелопачена, и большая часть страниц получила новые адреса. Однако именно старые URL проиндексированы в поисковых системах, на них, возможно, ведут ссылки с других сайтов (так называемые бэклинки). Сохранить обе страницы, старую и новую, неприемлемо: во-первых, возникнет путаница, во-вторых, у поисковых роботов такое же отношение к дублям, как у Нео к агентам Смитам. Лекарство существует, и называется оно постоянным редиректом, или редиректом 301, или переадресацией 301. Через настройки в файле-конфигураторе. htaccess, находящемся на веб-сервере, мы дает понять роботу, что страница перемещена в иное место, а посетитель, открывший старый URL, автоматически переправляется на актуальный. Имейте в виду, при правильном редиректе «вес» старой страницы (тИЦ в трактовке «Яндекса») постепенно передается новой. Поэтому постоянная переадресация пригодна для страниц, которые приводят на сайт трафик (например, используются в рекламе), обеспечивают конверсию, имеют обратные ссылки. На утратившие актуальность страницы старой версии уместно поставить так называемую ошибку 404 («Не найдено») со ссылкой на одну из основных страниц новой версии. Таким образом, вы дадите понять поисковикам, что эти страницы от прежнего «воплощения» сайта новым не унаследованы и их надлежит вынести из индекса. В случае когда требуется масштабная замена интернет-адресов (например, при переходе с одного движка на другой), на веб-сервере можно задействовать модуль mod_rewrite, который обеспечивает гибкое преобразование адресов, в том числе по сложным шаблонам. Например, сноровистому веб-мастеру ничего не стоит сделать, чтобы любой URL вида www.site.ru/product.php?id=226 превращался в приятный глазу и легко запоминаемый www.site.ru/product/226, а при обращении к файлу формата. html в адресной строке загружалась страница с расширением. htm. Собственно, такую подмену резонно использовать и когда некий URL на старой версии продвигался, служа точкой входа на сайт, но после редизайна требуется выдавать посетителю посадочную страницу с новой версии. Обратите внимание Не вешайте редирект со всех страниц старой версии сайта на одну нового.

• Да не канут старые URL в Лету. Зачем бы вы ни модифицировали файловую структуру – из-за смены движка или нет, – есть риск лишиться части наработанного на сайте. Представьте, что вы перекачиваете воду из одного резервуара в другой через трубу и вдруг обнаруживается, что ней есть пусть небольшие, но пробоины, да и в месте стыковки прокладка прохудилось. Часть жидкости безвозвратно пропадет. Во избежание потерь необходимо тщательно подогнать новую структуру к старой.

Учитывайте новые веяния в веб-дизайне. Не нужно слепо копировать популярные приемы и гнаться за модой. Изучите перво-наперво сайты в вашей отрасли как российские, так и зарубежные. Мониторинг конкурентов – это увлекательно и полезно: обращайте внимание на их логотипы, графические ходы, структуру страниц, тексты. Следите за общими и нишевыми трендами дизайна (см. главу 9 «Дизайн сайта: рационализм в каждом “вау!”»), чтобы не остаться за бортом. Однозначные директивы по части оформления сайтов немыслимы: задача придать современный облик веб-проекту, каким бы тот ни был, допускает великое множество решений. С одной стороны, мы наблюдаем глобальный крен в сторону минимализма, с другой – также в обиходе «излишества» наподобие «вдавленного» текста, необычных геометрических форм, глубоко детализированных иллюстраций, зубчатых кромок и т. д. По одну руку – нарочито плоские и аскетичные интерфейсы Google, по другую – имитация реальных поверхностей и текстур у Apple (по крайней мере, до конца 2013 года). Обратите внимание Делайте скидку на региональные особенности. Так, в ряде стран Юго-Восточной Азии тщательно выверенная «старообразность», наоборот, способна повысить доверие к массовому сайту, поскольку косвенно свидетельствует о его длительной истории.

В обязательном порядке пользуйтесь системами веб-аналитики: LiveInternet, «Яндекс. Метрикой», Google Analytics. Они покажут вам картину поведения аудитории сайта на макро– и микроуровне: общую посещаемость, длительность визита, глубину просмотра, данные конверсии, показатель отказов и т. д. Динамика статистических метрик помогает сформулировать большую часть проблем на сайте. Подробнее о них написано в главе 17 «Веб-аналитика: иди и смотри, смотри и иди». По результатам собственного «расследования» и аудитов (см. следующий пункт) обозначьте, что именно нужно сделать. Например, упрощенно: осовременить логотип, сохранить цветовое решение, но изменить гамму на более мягкую, добавить два раздела и один убрать, сделать верхнее меню фиксированным, создать больше посадочных страниц и заманивать аудиторию на них, переписать часть статей, от нескольких бесполезных избавиться, справа разместить сквозной блок с видеоподкастами, обеспечить продуманную поисковую оптимизацию и т. д.

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

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

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