Изменения в дизайне и структуре сайта Уехали.com
Привет, друзья! С началом весны на Уехали.com произошли некоторые изменения.
В первую очередь они коснулись структуры: на сайте уже более 300 статей (результат 2,5 лет работы!), и читатели не всегда могли найти нужную информацию среди такого большого числа публикаций.
Надеемся, мы исправили этот недостаток. Также мы изменили цветовую гамму: теперь у нас на сайте солнечный пляж – предпочтение отдано песочному, оранжевому и синему цветам.
В начале года мы писали о том, какие изменения ждут в 2016 году сайт Уехали.com. Их три: новый дизайн, новый страны и новые авторы. Итак, новый дизайн есть, и он полностью продиктован новой структурой сайта. Коротко пройдусь по каждому из разделов.
Обратите внимание
Прежде чем рассматривать новый дизайн и новую структуру, вспомним, как было до этого.
Верхнее меню. В верхнем меню собраны продукты, которые лично мы можем предложить нашим читателям: возможность заказать экскурсии в Паттайе, купить путеводитель и/или разговорник. И статьи, благодаря которым можно ознакомиться с нами и отзывами о нас.
Нижнее меню. Нижнее меню – это «меню путешественника». Здесь вы найдете специальные формы и статьи, позволяющие самостоятельно спланировать свое путешествие: купить авиабилеты, выбрать отели, оформить страховку. В подавляющем большинстве случаев этими сервисами мы пользуемся сами.
В левой колонке теперь собраны статьи о Таиланде по самым полезным рубрикам. С идеи этой колонки и начались все изменения.
Левая колонка – самая главная. Для лучшего структурирования информации на сайте мы перешли от двух колонок к трем. В верхней части левой колонки собрано наше «портфолио» по странам Юго-Восточной Азии, которые мы посетили.
Центральная колонка. Мы никогда не позиционировали Уехали.com как тревел-блог (то есть дневник путешествий), а с самого начала были сайтом. Поэтому вид анонсов статей на главной странице был также изменен с блогового на журнальный. Вверху появился слайдер, который позволяет вынести наверх какие-то давно написанные, но не потерявшие актуальности статьи.
Правая колонка. Правая колонка на нашем сайте долго была полем для экспериментов, было время, там стояло больше 15 различных модулей. Теперь их всего пять и они самые важные: — форма поиска (очень удобная вещь!), — форма подписки, — модуль со статьями, у которых за последние 90 дней было наибольшее число просмотров и комментариев, — всего один модуль рекламы,
— модуль с экскурсиями по Паттайе.
Новый дизайн сделан в журнальном стиле и в пляжных цветах. В Таиланде мы живем или в Норвегии, в конце концов?
Подвал. Внизу сайта мы собрали то, что обычно помещают в низ сайта:
— ссылки на подписку и группы в соцсетях (кстати, очень ждем вас в нашей активной и яркой группе во ВКонтакте!), — статистику сайта (количество статей и комментариев и др.), — статьи о сайте («Правила сайта», «Реклама на сайте»),
— интересные и полезные подборки: «Интересные факты о Таиланде», «Погода в Паттайе по месяцам» и др.
Техническая информация. Мы используем тему Canvas от WooThemes для Вордпресс. Это премиум-тема, которая удобна в администрировании и содержит несколько шаблонов дизайна – «Блог», «Журнал», «Бизнес» и др. Разрабатывалась британскими дизайнерами. Сайт Уехали.com хостится в Siteground’е на голландских серверах.
Как сохранить трафик после редизайна сайта
следующий код:
meta name=”robots” content=”noindex, nofollow”
Не забудьте отменить запрет на индексацию после завершения проверки и исправления ошибок.
Шаг № 4: просканируйте новую версию сайта
Вам необходимо просканировать новую версию сайта и сравнить ее со старой. Для этого воспользуйтесь программой Screaming Frog. Выполните следующие действия:
- Создайте копию результатов сканирования старой версии сайта.
- Просканируйте новую версию сайта, экспортируйте полученные данные и создайте копию результатов сканирования.
- Откройте результаты сканирования старой версии сайта в Excel или другом редакторе таблиц. С помощью функции «Найти и заменить» замените название домена во всех URL с vash-site.ru на test.vash.site.ru.
- Копируйте полученные URL в текстовый файл. Воспользуйтесь редактором Notepad++ или аналогичной программой. Теперь у вас есть пять документов:
- Результаты сканирования старой версии сайта (xls).
- Копия результатов сканирования старой версии сайта (xls).
- Результаты сканирования новой версии сайта (xls).
- Копия результатов сканирования новой версии сайта (xls).
- Результаты сканирования новой версии для Screaming Frog (txt).
- Переключите режим Screaming Frog со Spider на List. Это позволит вам обработать с помощью программы файл в формате txt.
Загрузите список URL из файла в формате txt в программу Screaming Frog. Для этого воспользуйтесь кнопкой Select File. После выбора файла нажмите Start.
Сохраните результаты сканирования в таблице. Это окончательные данные сканирования новой версии сайта, которые вы будете использовать для анализа.
Шаг № 5: проанализируйте полученные данные
Откройте таблицу с окончательными данными сканирования тестовой версии сайта. Если все сделано правильно, вы увидите огромный набор данных, сгруппированных в столбцы с заголовками Address, Content, Status Code и так далее.
Вам необходимо выполнить аудит, обращая внимание на ошибки, описанные во втором пункте руководства. Предварительно следует сгруппировать данные. Например, для анализа заголовков страниц скопируйте первые семь столбцов таблицы и вставьте их в новый лист. Для анализа описаний скопируйте первые четыре столбца таблицы, а также столбцы 8,9 и 10, и вставьте их в новый лист.
У вас должен получится отдельный лист для каждой группы данных: заголовок, описание, ключевые слова, заголовки H1 и H2, канонические URL, количество слов, уровень, входящие и исходящие ссылки.
Каждый лист должен включать первые четыре столбца исходной таблицы, а также столбцы, относящиеся к конкретной группе данных.
Например, лист Keywords должен включать следующие столбцы: Address, Content, Status Code, Status, Meta Keyword 1, Meta Keyword 1 length.
Теперь вам необходимо сравнить данные старой и новой версий сайта. Для этого откройте копию таблицы с результатами сканирования старой версии ресурса. Скопируйте и добавьте нужные данные в листы с окончательными данными. Например, для анализа группы данных Keywords добавьте столбцы Meta Keyword 1 и Meta Keyword 1 Length в лист Keywords.
Теперь вам необходимо найти совпадающие значения в столбцах Meta Keyword 1 и Meta Keyword 1 Length, полученных при сканировании старой и новой версий сайтов. Для этого в редакторе таблиц выделите дублирующиеся значения. В MS Excel это можно сделать с помощью меню «Условное форматирование – Правила выделения ячеек – Повторяющиеся значения». Повторите эти действия для каждой группы данных.
Если все данные в столбцах, полученных при сканировании старой и новой версии сайта совпадают, считайте, что смена дизайна прошла успешно.
Важно
Если данные не совпадают в некоторых строках, вам необходимо проверить соответствующие страницы и добавить недостающую информацию вручную. Если совпадений вообще нет, при смене дизайна вы потеряли важные данные.
Сообщите об этом разработчику нового дизайна и специалисту по поисковому маркетингу.
Обратите внимание на ошибки, существующие в старой и новой версии сайта. Если вы не исправили их на этапе № 2, сделайте это сейчас.
Смена структуры или дизайна сайта
Время от времени каждый сайт нуждается в обновлении. Исходя из этого могут возникнуть вопросы, которые связаны с изменением структуры и дизайна ресурса.
Мы готовы поделиться с вами некоторыми советами о том, как правильно выполнить такие изменения, чтобы не потерять посетителей и высокие позиции в поисковой выдаче.
Необходимость и риски
Говоря об обновлении сайта, подразумеваем 2 процесса:
Смена структуры и редизайн
Это два разных процесса, но в большинстве случаев они происходят одновременно.
Необходимость смены структуры сайта и дизайна обусловлена:
- изменениями условий рынка/сферы, в которых работает сайт и потребностей посетителей;
- расширением функционала, сменой CMS (движка);
- переходом на ЧПУ;
- внедрением адаптивной верстки на сайт.
Все эти причины формируют один объемный процесс обновления сайта. Естественно, ресурс меняется не только в глазах посетителей, но и для индексирующего робота и поисковой системы, поэтому подобные изменения несут за собой определенные риски:
- исключение сайта из поиска;
- ухудшение позиций страниц по запросам;
- снижение трафика на сайт;
- возникновение дублей или каких-либо служебных страниц в результатах поиска.
В результате чего возникает основная задача – минимизировать эти риски.
Готовим новую версию
Для обкатки новой версии сайта, проверки функциональности и работоспособности можно разместить ее на отдельной площадке, где собственно и будет происходить тестирование. Это могут быть:
- тестовые поддомен – dev.site.ru
- тестовый каталог – site.ru/dev/
Для того, чтобы тестовая версия не попала в результаты поиска, ее следует запретить в файле robots.txt. В противном случае, позиции и трафик на основную версию сайта существенно изменятся в худшую сторону.
Второй вопрос, который возникает после определения места тестирования ресурса – какую выбрать CMS для новой версии сайта? При выборе движка в первую очередь стоит обратить внимание на:
- удобство администрирования и возможности интеграции;
- гибкость настроек: редиректы, плагины, корректные HTTP-коды;
- дизайн – наличие адаптивной или мобильной версии, стандартных шаблонов.
После выбора CMS необходимо определить, как будет выглядеть структура новой версии сайта. Прежде всего стоит опираться на такие простые принципы:
- создавать простую и понятную пользователям структуру;
- использовать ЧПУ-адреса страниц;
- визуализировать навигацию на сайте (“хлебные крошки”) – это поможет ориентироваться на сайте не только пользователям, но и поисковой системе;
- думать о посадочных страницах под категории запросов.
При обновлении сайта очень важно опираться на фактическое поведение пользователей на новой версии:
- используем А/B-тестирование на значимой части пользователей;
- смотрим за результатами в Яндекс.Метрике.
Также при подготовке значимых изменений на сайте стоит оценить правильность выбранного направления:
- обновить только часть сайта (раздел либо категорию);
- проследить за изменением позиций и трафика;
- определить дальнейший вектор обновления.
Вне зависимости от того, какой вариант обновления вы выберете, необходимо проверить исходный код новой версии сайта, чтобы в дальнейшем избежать возможных проблем с индексированием:
Чек-лист для устранения проблем с индексированием
Поскольку при смене структуры сайта меняются адреса страниц, необходимо:
- создать новый файл Sitemap;
- обновить и проверить файл robots.txt.
Для этого используйте такие инструменты Яндекс.Вебмастера, как “Анализ файлов Sitemap” и “Анализ robots.txt”.
Инструменты Яндекс.Вебмастер
Зачастую обновление сайта связано с переходом на новый домен или HTTPS-протокол.
Для индексирующего робота не имеет значения – будете вы проводить процесс одновременно или по порядку. Главное, чтобы по старому и по новому адресу сайта содержался абсолютно идентичный контент, т.е. либо обновленная версия, либо старая.
Однако, для владельца сайта лучше разделить эти процессы для того, чтобы получать более прозрачную статистику по изменениям на сайте.
Обновление сайта
Если контент со старых страниц был перенесен на страницы по новым адресам, здесь все просто – используем HTTP-301 редирект со старых страниц на новые:
- пользователи и поисковый робот попадают на новые страницы;
- робот включит в выдачу новые адреса;
- передает показатели новым страницам.
В ситуации, если контент был удален, но тематика ресурса сохранилась, используем HTTP-301 редирект на наиболее подходящие по смыслу страницы. Если же тематика сайта изменилась, нужно настроить HTTP-404 для удаленных страниц или вообще запретить удаленные каталоги в файле robots.txt.
При смене структуры важно обеспечить быстрый обход страниц по новым адресам:
Чек лист для быстрого обхода страниц роботом
Наиболее важные страницы сайта также можно добавить в соответствующий инструмент Яндекс.Вебмастера, чтобы отследить, когда новые страницы появятся в поиске, как часто индексирующий робот посещает их и какой статус этих страниц в базе робота.
Инструмент “Важные страницы” в Яндекс.Вебмастер
В результате, для корректного обновления сайта с минимальными рисками для поисковой выдачи:
- правильно определяем вектор и дальнейшее развитие ресурса;
- обеспечиваем доступность контента на новой версии страницы для индексирующего робота;
- используем HTTP-301 редирект;
- ускоряем обход новых страниц.
Придерживайтесь этих простых рекомендаций и обновление вашего сайта пройдет успешно!
Специалист по интернет-маркетингу в компании ApollonGuru. Человек интересующийся
Смена структуры или дизайна сайта
Говоря про обновление сайта мы подразумеваем два процесса:
Это совершенно разные процессы, но, в большинстве случаев, происходят они одновременно. Именно поэтому говоря об «обновлении сайта», мы будем иметь в виду и смену структуры сайта и его редизайн.
Причины, для обновления сайта
Необходимость смены структуры или дизайна сайта обычно обусловлены:
- изменениями рынка или потребностей пользователей
- расширением функционала, сменой CMS
- переходом на ЧПУ
- переходом на адаптивную верстку
Любая из этих причин, также как их совокупность, влечет за собой обновление всего ресурса.
А любые существенные изменения на сайте несут риски с точки зрения поисковой оптимизации, ведь сайт изменится не только для посетителей, но и для поисковых роботов.
Это может быть чревато исключением сайта из поиска, ухудшением позиций страниц по запросам, снижением трафика на сайт, возникновением дублей или каких-либо служебных страниц в результатах поиска. Основная задача вебмастера – снижение этих рисков.
Готовим новую версию
Для начала, для того, чтобы обкатать новую версию, проверить ее функциональность и работоспособность, можно разместить ее на отдельной площадке. В качестве площадки, например, можно выбрать тестовый поддомен – dev.site.ru, или использовать тестовый каталог на своем основном ресурсе – site.ru/dev/.
При выборе новой CMS стоит обратить внимание на:
- удобство администрирования и возможность интеграции с внешними сервисами
- гибкость настроек: редиректы, плагины, корректные http-коды
- дизайн – наличие адаптивной или мобильной версии, стандартных шаблонов
После выбора подходящей CMS, необходимо определиться со структурой вашего будущего сайта. При выборе новой структуры и дизайна, стоит ориентироваться на своих будущих пользователей, чтобы сделать сайт максимально простым и понятным для них.
Обязательно использовать ЧПУ-адреса и визуализировать навигацию на сайте (хлебные крошки), это поможет лучше ориентироваться не только пользователям сайта, но и поисковой системе.
Так же лучше заранее продумать посадочные страницы под разные категории запросов.
При определении дальнейшего вектора и формата развития ресурса, очень важно опираться на фактическое поведение пользователей новой версии.
Для этого можно использовать A/B-тестирование (предлагать новую версию какой-то значимой части своих пользователей) и наблюдать за результатами в Яндекс.Метрике.
Зачастую это помогает избежать многих ошибок и корректным образом определить предпочтения пользователей.
Кроме тестирования новой версии сайта на пользователях, желательно также провести ее тестирование с точки зрения поиска. По возможности, чтобы сначала оценить правильность выбранного направления, стоит обновить только часть сайта (раздел, категорию), затем проследить за изменением позиций и трафика, и только после этого окончательно определиться с дальнейшим вектором обновления.
При этом вне зависимости от того, какой вариант обновления будет выбран, во избежание проблем с индексированием новой версии сайта, необходимо проверить все ее содержимое, обращая внимание на следующие моменты:
- проверка исходного кода новой версии (отсутствие мета-тегов noindex на нужных страницах; отсутствие незакрытых тегов noindex; значение атрибута Canonical; отсутствие загрузки контента с помощью JavaScripts; навигация в меню совпадает с внутренней структурой сайта)
Зачастую обновление сайта связано с переездом на новый домен или с переходом на защищенный https-протокол.
Для индексирующего робота нет никакого значения, будут ли эти процессы проходить одновременно или осуществляться по порядку, один за другим, главное – чтобы и по старому и по новому адресу сайта содержался абсолютно идентичный контент (либо обновленная версия, либо старая).
При этом для вебмастера и владельца сайта лучше, чтобы процессы были разделены. Это позволит получать более прозрачную статистику по производимым на сайте изменениям.
Обновление сайта
Непосредственно в процессе обновления у всех вебмастеров возникает вопрос – что же делать со старыми страницами сайта?
Если контент страниц переехал на новые адреса, то используем HTTP-301 редирект со старых страниц на новые (пользователи и робот попадают на новые страницы; робот включит в выдачу новые адреса; редирект передает все накопленные показатели новым страницам).
Если контент удалили, но тематика сохранилась, то используем HTTP-301 редирект на наиболее подходящие по смыслу страницы (страницы категорий или на главную).
Если контент удалили, и тематика сменилась, стоить настроить 404-й код ответа для удаленных страниц или запретить их в robots.txt.
Обеспечиваем быстрое индексирование
При смене структуры важно обеспечить быстрый обход страниц по новым адресам. Для этого:
- Используем корректный Sitemap
- Не используем Crawl-delay в robots.txt (чтобы робот мог посещать сайт без ограничения по количеству запросов)
- Проверяем наличие запрета в robots.txt для служебных страниц
- Используем инструмент «Переобход страниц» в Яндекс.Вебмастере
Наиболее важные страницы сайта также можно добавить в соответствующий инструмент в Яндекс.Вебмастере:
Инструмент поможет отследить, как часто новые страницы появляются в поиске, как часто поисковый робот их посещает, и какой у них статус в базе индексирующего робота.
Резюме
В результате, для корректного обновления сайта с минимальными рисками для поисковой выдачи, нужно:
Полезные ссылки:
Яндекс.Вебмастер
Яндекс.Метрика
Блог для вебмастеров
Блог Платона Щукина
Как сделать редизайн сайта без потери позиций в поисковой выдаче
Партнерский материал от Владиславы Рыковой, директора маркетингового агентства МАВР
Дизайн и юзабилити сайта в последние годы стали чрезвычайно важны. Опытным путем доказано, что чем приятней и удобней интерфейс, тем выше вероятность того, что пользователи задержатся на вашем ресурсе.
Поэтому добавление новых функций и изменение внешнего вида на более удобный в долгосрочной перспективе приведут к улучшению позиций сайта в поисковых системах благодаря поведенческим факторам и увеличению конверсии.
Когда нужен редизайн
Вашему сайту срочно нужен редизайн, если:
- Есть ошибки в функционале. Они будут мешать вашим посетителям, что негативно повлияет на SEO-продвижение.
- Проблемы с юзабилити. Если вашим посетителям неудобно пользоваться сайтом, это обязательно скажется на количестве постоянной аудитории.
- Текущий дизайн устарел. Мировые информационные компании делают редизайн ориентировочно раз в два года. Если оформление и функционал вашего сайта не менялись большее 3-5 лет, тогда это пора сделать, так как тенденции в интернете меняются быстро.
- Вы использовали шаблонный дизайн. В нем нет ничего плохого, если сайт нужен в качестве «визитки». Если же предполагается, что он должен приносить доход, доработайте его под собственный проект.
- Сайты ваших конкурентов лучше. Вы получите больше посетителей, если ваш проект выглядит лучше или превосходит хотя бы в чем-то конкурентов.
Редизайн сайта не обязательно делать кардинальным, с глобальными изменениями во внешнем виде и функционале. Особенно в том случае, если у вас уже есть хорошие позиции в поисковой выдаче, трафик и своя постоянная аудитория.
Серьезные изменения могут негативно сказаться на всем этом.
Чтобы избежать потери трафика и постоянных посетителей или клиентов, внедряйте изменения постепенно, тестируйте корректность работы нового функционала и отслеживайте реакцию людей и поисковых систем, чтобы иметь возможность быстро отреагировать на падение позиций.
Как правильно сделать редизайн
Перед началом любых работ, связанных с редизайном, необходимо понять какие моменты и как именно следует изменить, чтобы сделать сайт удобней и приятней. Для этого желательно изучить конкурентов и новости индустрии (читайте “Советы по редизайну сайта. Тенденции веб-дизайна 2017”). Дальше вам нужно будет вместе с техническим специалистом продумать и определиться с некоторыми моментами:
- структурой;
- навигацией;
- контентом;
- тегами: alt, title, description.
Структура сайта
Изменение структуры сайта – первое, что может негативно повлиять на позиции в выдаче. Возможно, кто-то из ваших посетителей или клиентов сохранили определенные страницы в закладки.
Если адрес этого документа изменить, тогда при заходе на нее пользователь получит только 404-ошибку вместо ожидаемой информации или товара. Поэтому для тех страниц, которые пришлось переместить, используйте 301-редирект.
Это поможет сохранить хорошие позиции в поисковой выдаче.
Возможно, вам стоит поработать с адресами страниц вашего сайта, чтобы сделать их более понятными для пользователей. В этом случае также не обойтись без 301-редиректа, который поможет не потерять то, что вы уже имеете со старыми урлами.
Совет
Если вы планируете не только изменить структуру и урлы, но и сам основной адрес сайта, то есть доменное имя, тогда без 301-редиректа тем более не обойтись. Не забудьте настроить его со всех старых страниц на новые.
Дизайн сайта и структура сайта
Данный урок называется “Немного о дизайне”, но основная информация которую нужно усвоить – структура сайта.
Это во многом определяет дизайн. Ниже мы рассмотрим некоторые из принципов построения дизайна, но эти знания весьма поверхностные и не сделают вас дизайнером. Первая же часть урока – структура, здесь гораздо приоритетнее.
Итак, вспомним четыре основных вопроса на которые должен отвечать сайт когда посетитель приходит на него:
- Куда я попал?
- Что здесь есть интересного для меня?
- Почему здесь предложение этого интересного лучше чем у других?
- Как мне получить то, что здесь предлагается?
Все это определяет ту структуру по которой будет формироваться наш будущий сайт, проводя за ручку посетителя от первого положительного впечатления привлекательной картинкой до подробного объяснения ему, уже убежденному, как ему приобрести этот замечательный ему так нужный продукт.
Для того, чтобы сделать нашу структуру наглядной можно использовать такие несложные инструменты как листок и ручка. Рисуем наши элементы и стрелочками соединяем, как посетитель должен ходить по нашему сайту. Опять же от ответа на вопрос “Куда он попал” до подробной инструкции “Как ему приобрести наш продукт”.
Конечно можно использовать и разные графические программы, но это уже нюансы. В качестве примера работы по составлению структуры можно взять составление карты сайта при работе веб-студии с клиентом. Подобная карта передается дизайнеру для разработки макета.
По ссылке выше вы можете ознакомиться с более расширенным описанием формирования на сайте содержания. Но для грамотного юзабилити и работоспособности нашего сайта все сводится к ответу на вышеперечисленные четыре вопроса.
Далее мы также должны знать, что страницы сайта могут быть различной степени вложенности. Различие уровня определяется степенью важности. Как раздел и подраздел.
Например http://kaksdelatsite.ru/nemnogo-o-dizayne это адрес страницы на которой вы находитесь. Где kaksdelatsite.
ru это адрес сайта как такового, а nemnogo-o-dizayne адрес страницы первого уровня, может быть и третьего, четвертого и т.д. уровня страницы.
С тем, сколько может быть всего уровней я лично не знаком, но пока с пределом вложенности страниц на сталкивался.
Немаловажно понимать, что чем глубже страница, тем она менее значима для поисковых роботов.
Теперь рассмотрим непосредственно то, как пользователь может переходить с одной страницы на другую, как составить меню и ссылки на страницах.
Обратите внимание
Это самая простая структура сайта. Web-страницы идут одна за другой, и пользователь должен просматривать их как слайд-шоу. В линейной структуре не существует разделения контента на уровни.
Все страницы на таких сайтах равноправны, и их должен увидеть каждый посетитель. Несмотря на простоту реализации линейной структуры, недостатков у нее гораздо больше, нежели достоинств. Поэтому область ее применения четко ограничена.
Она может использоваться на имиджевых сайтах, сайтах-презентациях и в онлайновых учебных пособиях.
Реализация линейной структуры не представляет собой абсолютно никакой сложности. Самый простой вариант сайта — набор HTML-страниц, с каждой из которых есть ссылка на последующую предыдущую страницу. Но при этом на каждой страницы обязательно должно быть какое-то заглавие и ссылка на первую страницу.
Иначе посетители, попавшие в середину сайта, например, с поисковой системы, ничего не поймут и почти наверняка покинут проект разочарованными. Кроме того, очень полезно бывает показывать общее число страниц и как-то выделять номер той из них, на которой человек находится в данный момент.
Иначе просмотр проекта превратится для посетителей в путешествие в неизвестность.
Основой данной структуры является простое линейное размещение web-страниц. Однако на сайтах, построенных по этому принципу, посетители могут проявить некоторую инициативу, облегчив для себя поиск нужной информации. Под альтернативами в данном случае понимается выбор между двумя ветками.
Чаще всего подобная структура используется для сбора информации о посетителе. Примером здесь может служить процесс регистрации клиента на сайте какой-то фирмы, оказывающей определенные услуги. В этом случае все люди начинают работу со стартовой страницы.
Однако потом частным лицам предлагается ввести одну информацию, а представителям коммерческих структур — другую. После этого и те, и другие попадают на одну и ту же страницу.
Важно
Линейная структура с альтернативами и вариантами удобна в том плане, что с одной стороны она позволяет web-мастерам контролировать деятельность посетителей, направив их в определенное русло. А с другой стороны проявить некоторую инициативу, которая позволит им, во-первых, почувствовать свободу, а во-вторых, облегчить доступ к нужной именно им информации.
Это тоже контролируемая структура, которая напоминает дорогу с ответвляющимися от нее время от времени тупиковыми тропинками. То есть посетитель последовательно переходит с одной страницы на другую. Если информация, размещенная на какой-то из них его заинтересовала, и он хочет узнать подробности, то может перейти на ответвление, а потом вернуться обратно на основную «дорожку».
Главным преимуществом рассматриваемой структуры является то, что к ней легко перейти с обычного линейного размещения web-страниц. Такое часто бывает, когда созданный однажды сайт перестает удовлетворять возросшим требованиям, а глобальная переделка по тем или иным причинам невозможна. В этом случае web-мастер может быстро и без всяких проблем расширить проект.
Древовидная структура — самый универсальный способ размещения web-страниц. Она подходит для создания практически любых типов сайтов.
Ее принцип заключается в том, что пользователь при заходе на заглавную страницу оказывается перед выбором, куда идти дальше. После перехода в нужный раздел, он подбирает необходимый подраздел и т.п.
У древовидной структуры очень много достоинств, но так же есть и недостаток.
Речь идет о том, что в древовидной структуре очень сложно соблюдать баланс между глубиной и шириной. Если «дерево» сайта будет расти только вглубь, то пользователям, чтобы дойти до какой-то информации, придется загрузить и просмотреть слишком много страниц, что будет раздражать пользователей.
А если создать очень широкую древовидную структуру, то посетители будут вынуждены каждый раз тратить очень много времени для выбора нужной им ветки. А это тоже плохо.
Таким образом, при использовании древовидной структуры сайта необходимо постоянно следить за ее разрастанием и придерживаться золотой середины.
Эта структура уже на порядок сложнее всех рассмотренных ранее. В ней все страницы также размещаются в различных ветках.
Но у пользователя есть возможность перемещаться по ним не только вертикально (вверх-вниз), но и горизонтально (то есть между ветками на разных уровнях). Используется решетка в основном только в каталогах.
При этом перемещение между ветками на глубинных уровнях осуществляется с помощью отсылок на рубрики в других разделах.
Совет
Использование решетчатой структуры в других проектах нецелесообразно. Во-первых, она относительно сложна в реализации. Во-вторых, обращаться с «решеткой» нужно с очень большой осторожностью, так как структура сайта может получиться очень запутанной, и посетители будут вынуждены долго блуждать в поисках нужной им информации.
Если вы не дизайнер, то нет никакой необходимости им становиться. Для того, чтобы создавать профессиональные сайты можно использовать таланты, время и труд других людей. Это более правильный и грамотный подход. Чем делать глупое подобие на жалкое недоразумение лучше воспользоваться услугами профессионалов.
Многие (практически все) начинающие сайтостроители попадают в одну и туже лужу – самостоятельное создание дизайна.
Когда начинаешь осваивать некоторые приемы работы в фотошоп или других графических редакторах возникает ощущение что сделал что-то совершенно гениальное.
Ложное ощущение успеха рождается из сравнения самого себя с самим собой, что на самом деле не работает как адекватная оценка реальности.
Итак, если я вас не убедил и вы полны решимости делать самостоятельные картинки для сайта – в добрый путь, возможно вы со временем достигните профессионализма на этом поприще, если вы все же решили сразу начать с профессиональных работ, то перейдем к алгоритму создания профессионального дизайна.
Иногда непонимание дизайнером того что хочет заказчик переходит в неразрешимое противоречие между дизайнером и заказчиком дизайна. Одним из способов сократить расстояние между апонентами служит подбор цветовых сочетаний…
подробнее
Первый и самый распространенный метод получения профессионального дизайна – шаблоны.
Шаблонами забит интернет. Если набрать в поиске яндекса “шаблоны сайтов” вы получите около сорока двух миллионов ответов на этот вопрос.
Шаблоны по стоимости бывают:
- бесплатные;
- условно-бесплатные;
- платные.
Что такое бесплатные шаблоны можно не разъяснять, а вот на условно-бесплатных можно остановиться поподробнее.
Для примера возьмем сервис http://www.besttemplates.ru/. Наряду с бесплатными шаблонами этот сервис дает возможность купить шаблоны по смешной цене 1$ и 3$.
Эта цена чисто символическая, но дает определенные гарантии того, что продаваемые шаблоны имеют какой-то вес. Как по идее, так и по качеству исполнения.
Обратите внимание
При покупке или скачивании (бесплатного) шаблона дизайна мы можем получить несколько вариантов исполнения:
Для себя я выбираю возможность скачать PSD файлы, файлы в формате фотошоп. Для дальнейшей работы это наименее трудоемкий вариант, при этом данный файл можно доработать под себя. Что-то увеличить, что-то передвинуть и т.д.
Flash вставки можно использовать, но они накладывают существенные ограничения на дальнейшую работу. Поэтому использование шаблонных динамических заставок лучше не использовать.
Прилагаемые к шаблону шрифты можно использовать с оговорками.
Запомните правило: можно использовать не более 2-х различных шрифтов на сайте, включая шрифты логотипа, меню, заголовков и т.д.
Итак, выбирая шаблон – выбирайте PSD формат шаблона.
Так или иначе кроме разнообразных стандартов, правил, тенденций и моды – есть индивидуальное восприятие или по-другому вкус.
В каких случаях необходимо учитывать этот фактор и как?
Итак: для того, чтобы вы не попались на удочку собственного восприятия – посоветуйтесь. Это просто, но и тяжело одновременно, особенно если вы дизайн делали сами. Чем большее количество независимых экспертов дадут свое мнение по данному дизайну, тем больше вероятность сделать сайт который будет внешне нравится большинству посетителей.
В случае когда вы делаете сайт на заказ предварительно жизненно необходимо собрать всю возможную информацию о вкусе заказчика, в частности пусть он приведет примеры сайтов которые ему внешне нравятся и даст подробное описание того, что он хочет видеть, при этом желательно в письменном виде.
При работе с шаблоном или с эксклюзивным дизайном немаловажным (а зачастую и определяющим) фактором является уже сформированный стиль компании. Предпочитаемые цветовые решения, логотип и т.д.
Поэтому прежде чем утверждать дизайн будущего сайта, нужно ознакомиться с наличием фирменного стиля и его важностью для компании. Если эти факторы имеют высокий приоритет, то и дизайн выбираем соответственно уже сформированному стилю, по цветовым решениям и общей направленностью (строгий, “веселенький”, монохромный и т.д.)
Важно
Существует два основных вида решения выбора размеров сайта. Фиксированный размер – жесткая ширина независимая от ширины монитора (жесткая ширина задается в пикселях). И резиновый дизайн – сайт занимает отведенную ему монитором ширину (ширина задается в процентах).
Ширина сайта определяется шириной монитора минус 30px. Этот зазор нужен для того, чтобы не было полосы прокрутки внизу страницы и страница целиком помещалась на мониторе. На данный момент стандартны разрешением мониторов является разрешение в 1024px по ширине.
Поэтому ширину фиксированного сайта выбираем 994px.
Так как данный курс направлен на новичков в сайтостроении, то резиновый дизайн по причине достаточной сложности его исполнения мы рассматривать не будем.
Золотой закон механики, химии, физики и т.д. – выигрывая в одном, проигрываешь в другом.
Веб-дизайн не обошел этот принцип. В этой сфере данный закон проявляется в виде поиска баланса между качеством изображения и его весом.
Не смотря на то, что сейчас скоростной интернет далеко не редкость, а скорее правило – все равно большой вес картинок сайта не есть гуд.
Допустим у нас есть шаблон в PSD формате, то есть в формате фотошоп и мы берем элемент дизайна для сохранения.
И нам нужно сохранить отдельный элемент дизайна картинку 500 px на 300 px (ширина и высота картинки в пикселях). Для этого воспользуемся функцией сохранения в фотошоп “Save for Web and Devices..”
В результате мы перейдем к панели управления сохранения сжатого изображения:
Как видим из данного изображения, мы можем сравнивать размер и качество изображения с оригиналом. Для этого открываем вкладки “Original” и “Optimized”.
Выбирая формат и качество сохранения приходим к требуемому разультату.
Совет
Каждого пользователя Интернет интересует в первую очередь трафик, который напрямую зависит от наличия на сайте графики. Чем больше графики, тем больше трафик.
подробнее
Цветовая гамма должна вызывать положительные эмоции у подавляющего большинства посетителей, по крайней мере, не раздражать.
подробнее
Выравнивайте текстовые и графические объекты только одним способом, например, по центру. Соблюдайте симметричность оформления графики и текста.
При размещении непрерывного большого объема текста пользуйтесь вертикальными отступами. Одной из распространенных ошибок является сваливание в кучу большого количества текста. Текст разбитый не небольшие параграфы воспринимается гораздо лучше. Также для лучшего восприятия используйте графические вставки,рисунки и шрифта различными .
Дизайн сайта должен быть удобным для пользователя, не заставлять его думать и искать элементы управления и навигации. Он предназначается в первую очередь для выделения смысловых блоков, визуального структурирования имеющейся на сайте информации.
подробнее
Оптимально выбирать шрифт “без засечек”, шрифты с засечками плохо воспринимаются на мониторе. Оптимально использовать шрифты “Tahoma” и “Verdana”. Все без исключения браузеры из поддерживают и они приятно и привычно воспринимаются пользователями.
Также при выборе фона для шрифта избегайте как резкого контраста так и слияния цвета шрифта с цветом фона. Например лучше воспринимается на черном фоне светло-серый чем четко белый цвет.
Цвет – воспринимаемая сетчаткой глаза область светового спектра, видимая часть света с длинами волн в диапазоне от 400 до 700 нанометров. Что? Думаете я только что прочитал Энциклопедию? Определение конечно же верно, но не передаёт всей важности цвета. Ведь всё, что нас окружает, не имеет в действительности никакой окраски.
Просто у всех предметов разная способность отражать и поглощать свет, в результате чего мы видим отражённый телами или средами часть света, но уже с другим спектром волн (Дальтоникам дальше не читать). Цвет воспринимает глаз человека, но затрагивает его эмоции. Что может быть красивее заката у побережья тёплого моря в компании красивой девушки?
Вот тут сердце стучит нормально, жизнь прекрасна и всё такое… А теперь представьте, что Вы не воспринимаете цвета, всё вокруг чёрно-белое… ну, или 256 оттенков серого Это всё равно, что иметь чёрно-белый монитор.
подробнее
