Как изменить интерфейс сайта

Приветствую вас, друзья! 🙂

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

Обобщённо все этапы разработки ресурсов «с нуля» изложены в инструкции по созданию сайта.

Причём, процесс разработки веб-проектов рассмотрен не только в общем, но и для конкретных платформ (на данный момент готовы публикации, описывающие весь цикл создания веб-проекта на базе CMS OpenCart и WordPress).

Этих знаний вам вполне должно хватить для самостоятельного создания ресурса своей мечты.

Итак, сайт готов. Вы смотрите на своё детище с умилением и радуетесь его работе. Но в один прекрасный момент, глядя на него, у вас появляется идея «Хм… а что, если сделать эту кнопочку не квадратной, а овальной» или «Что-то у меня картинки в тексте теряются… как бы их обвести красивенько?»

И, самое главное, — «Как бы мне это сделать самому, а то программисты такие цены заламывают…?» 🙂

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

Поэтому у меня и возникла идея написания сегодняшней статьи, из которой вы узнаете, что такое интерфейс сайта, зачем его менять, и, самое главное, — как это сделать.

Благодаря приведённой в статье информации вы сможете поменять цвет сайта; узнаете как сделать фон для сайта; размер, тип и цвет шрифта, а также производить другие манипуляции с дизайном вашего веб сайта. И, самое главное, — после прочтения изложенного материала вы сможете всё это делать своими руками 😉

Уверен, что вам понравится. Начинаем!

Что такое интерфейс сайта?

По-научному интерфейс сайта (он же веб-интерфейс, он же UI от англ. «user interface» — пользовательский интерфейс, он же внешний вид сайта, он же, грубо говоря, дизайн сайта) – это набор средств для взаимодействия пользователей с ресурсом. Проще говоря, это набор «кнопочек», «картиночек», «ползуночков»,  на которые можно понажимать, посмотреть и поперетаскивать, чтобы произвести требуемое действие.

Интерфейс сайта или UI — это то, что видит пользователь в своём веб-браузере при переходе на ваш ресурс и с помощью чего он производит на нём различные действия (перемещается по страницам, скачивает файлы, комментирует, оформляет заказ и т.д.).

А вот уже то, насколько пользователям удобно пользоваться UI, называется UX, если кому интересно 🙂 А то многие не понимают, кто такие UI/UX специалисты, которых так интенсивно ищут на сайтах поиска работы, под которыми подразумеваются не кто иные, как веб дизайнеры.

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

Ресурс приобретает свой конечный внешний вид в процессе вёрстки сайта, которая заключается в реализации (верстальщики любят слово «натягивание») макета, подготовленного дизайнером или вами самостоятельно.

С терминологией разобрались.

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

Рано или поздно, насколько бы ни продуман был ваш веб-интерфейс, вы всё равно захотите что-то изменить, передвинуть, обвести и т.д.

Лично меня, как разработчика, по началу очень возмущало, когда заказчики по три раза просили переделывать одну и ту же кнопку. Я постоянно злился и не понимал, что же им никак неймётся.

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

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

Инструменты для самостоятельной вёрстки сайта

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

Также я кратко расскажу об их предназначении, чтобы вы не задавались вопросом «Зачем мне это нужно?».

1. Веб-браузер – эта программа установлена у всех вас, т.к. благодаря ней вы попали в Интернет, на мой сайт и читаете эти строки 🙂 В ней мы будем тестировать наши изменения.
2. Инструменты разработчика – это плагин веб-браузеров (о том, что такое плагины читайте в соответствующей статье), который является самым главным средством при вёрстке сайтов. Благодаря ему мы будем получать классы и идентификаторы элементов интерфейса для дальнейшего их поиска и изменения в коде, а также текущий список их свойств, которые, мы сможем править прямо в браузере.
3. Редактор кода – программа, необходимая для внесения правок в исходный код сайта. В качестве её может выступать самый банальный текстовый редактор типа «Блокнот». Более подробно о востребованных сегодня среди программистов редакторах кода и их возможностях вы можете прочитать в статье о программах для создания сайта. Также в данных целях можно использовать редакторы кода, встроенные в некоторые из CMS.

Про себя я могу сказать, что при вёрстке сайтов я люблю пользоваться веб-браузером Google Chrome со встроенными средствами разработчика и NotePad++.

По поводу неказистого редактора кода хочу сказать, что я к нему прибегаю в случаях однократных правок, для длительной и масштабной работы над проектами я перебегаю на сторону полноценных IDE: NetBeans или VS Code.

Также я охотно пользуюсь встроенными в CMS редакторами кода, которые отлично подходят для доработки, если нет возможности развернуть их копию на локальном веб-сервере ввиду различных причин.

Но, несмотря на мои предпочтения, в данном руководстве будет участвовать минималистичная связка Chrome и NotePad++, использование которой избавит вас от установки кучи лишнего ПО.

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

Как изменить дизайн сайта своими руками: руководство

Прежде всего запускаем веб-браузер и переходим на свой сайт. В качестве примера я буду использовать свой тестовый ресурс, разработанный в рамках публикации об установке OpenCart на хостинг, — myopencart.com.ua. Чтобы увидеть его у себя в браузере, зайдите в статью по указанной ссылке и произведите описанные в ней правки у себя на ПК, иначе он будет для вас недоступен.

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

Главное, чтобы ваши проекты использовали в своей работе HTML и CSS, а таких сегодня подавляющее большинство.

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

Они есть в каждом современном продукте (Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer последних версий), но, к сожалению, способ из запуска различен.

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

• Google Chrome (встроен по умолчанию) – F12,
• Mozilla Firefox (нужен FireBug) – F12,
• Internet Explorer (встроен по умолчанию) – F12,
• Opera и Safari – горячей клавиши по умолчанию нет, запуск инструментов разработчика производится через меню браузера.

Итак, поскольку я пользуюсь Google Chrome, то при нажатии на F12 на клавиатуре в нижней части экрана появляются инструменты разработчика, содержащие код элементов дизайна сайта, которые выглядят так:

Если плагин у вас сбоку экрана, лучше всего его переместить вниз нажатием на кнопку справа от крестика, закрывающего окно (расположена в правом верхнем углу окна).

Как видите, данный плагин незамысловатый и представляет собой окно, в шапке которого расположена панель инструментов, которая состоит из (слева направо):

• кнопка выделения элемента для получения его свойств;
• переключатель мобильного режима (позволяет увидеть отображение интерфейса сайтов на мобильных устройствах);
• перечень инструментов (для изменения вёрстки сайта нас будет интересовать первый из них — Elements);
• настройки внешнего вида плагина, которые расположены в правой части окна (предназначены для удобства работы – для интереса можете потыкать 🙂 )

Итак, по умолчанию активен инструмент разработчика Elements, который как раз нам и пригодится. Окно плагина в данном случае разбито на две части:

Слева расположена бОльшая половина, в которой отображается HTML код страницы вашего ресурса в виде сгруппированных строк, учитывая иерархию (вложенность объектов друг в друга).

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

Нажимаем на строку, соответствующую объекту, левой клавишей мышки и в правой части окна данного плагина мы видим список его css-свойств, задающих внешний вид, рассортированных по классам, id и типам элементов.

В данном окне есть вкладки, отображающие различные DOM-свойства и события, но нам они сегодня не пригодятся, поэтому не буду забивать вам голову их детальным описанием 🙂

Для работы с вёрсткой сайта нам пригодятся две первые вкладки:

1. Styles, которая активна по умолчанию и содержит список свойств с возможностью их редактирования;
2. Computed, содержащая список абсолютно всех свойств элемента (бывает полезно, когда свойства классов перекрывают друг друга и нужно найти проблему).

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

К примеру, мне нужно для кнопки корзины на моём сайте myopencart.com.ua поменять цвет фона и шрифта.

Первым делом, мне нужно найти требуемый элемент интерфейса сайта в коде и узнать его CSS-класс или значение HTML атрибута id.

Для этого я нажимаю на первую слева кнопку на панели инструментов разработчика в виде стрелочки (в зависимости от браузеров и их версий она может иметь разный вид, но расположение её одинаково) и навожу на кнопку корзины:

После того, как я нашёл элемент интерфейса сайта и навёл на него курсор, нажимаю левую клавишу мышки, чтобы выбрать и просмотреть его свойства.

Аналогичные действия можно было бы произвести, проинспектировав объект. Для этого нужно навести курсор мыши на необходимый элемент и нажать на правую кнопку:

В появившемся меню выбираем Просмотреть код, после чего у нас открываются инструменты разработчика (если до этого они были неактивны) с выделенным в инспекторе объектов требуемым элементом и списком его свойств в правой части плагина.

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

Мне нужно изменить цвет фона кнопки корзины с чёрного на, допустим, синий. За данную правку внешнего вида веб сайта отвечает CSS свойство background и его составляющие background-color или background-image.

Соответственно, ищем их в правой части инструментов разработчика.

Напомню, что в этом блоке отображаются CSS-классы выбранного вами элемента интерфейса сайта и их свойства, которые элемент унаследовал от них. Поэтому не забывайте внимательно изучать весь список, а не довольствоваться самым первым классом (требуемого свойства там может не быть).

В моём случае цвет фона кнопка корзины унаследовала от класса btn-inverse, т.к. он содержит требуемые свойства background-color и background-image:

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

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

Мне нужно поменять значение свойства background-color, которое представляет собой HTML код цвета (узнать его поможет любой графический редактор или таблицы цветов в Интернете).

Поэтому я ввожу вместо #363636, который соответствует чёрному цвету, #00f, что является сокращённой записью синего.

Но… как видите, необходимые изменения дизайна сайта не произвелись. Виной тому свойство background-image, содержащее градиент чёрного цвета, которое присутствует наряду с background-color и является более приоритетным, соответственно, к элементу будет применяться оно.

Чтобы сделать фон кнопки синим нужно либо изменить значение свойства background-image на #00f либо вообще от него избавиться.

Я лично предпочитаю второй вариант, т.к. это позволяет очистить код от лишних свойств, что при больших масштабах может существенно увеличить производительность ресурса и убрать путаницу, возникающую при правках интерфейса сайта.

Так мы и делаем, снимая галочку возле background-image, что означает его отключение. И, вуаля! 🙂

Всё отлично. Только, как мы видим, у нашей синей кнопки чёрное окаймление, что не есть хорошо.

Цвет границы элемента задаётся составным свойством border или border-color, которое входит в его состав (о свойствах и базовых понятиях CSS я обязательно поговорю с вами в будущих публикациях).

Соответственно, чтобы убрать рамку, нам нужно отключить свойство border-color для кнопки корзины, как мы это делали ранее с background-image, или задать ему значение цвета фона.

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

Поэтому я задаю границе кнопки синий цвета фона с помощью свойства background-color: #00f;

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

Действуем аналогично. Теперь нас будет интересовать свойство color, которое отвечает за цвет текста HTML элементов. Соответственно, ищем его в свойствах класса нашего элемента.

При поиске обнаруживается, что данное свойство имеется в нескольких классах: btn и btn-inverse, но в последнем оно не воспринимается.

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

Я не буду сейчас полностью раскрывать тему приоритетности CSS свойств, оставив её для будущих статей. На данном этапе ограничусь советом.

Если вы столкнётесь с ситуацией, когда задаёте элементу интерфейса сайта CSS свойство, а оно не воспринимается (является перечёркнутым в списке свойств инструментов разработчика), то его нужно прописать в формате свойство: значение !important или в открывающем HTML тэге вашего элемента дописать style=»свойство: значение;».

Извините, но не удержался, т.к. слишком уж данная ситуация распространена и вызывает массу непонимания со стороны начинающих.

Итак, возвращаемся к изменению цвета надписи на кнопке корзины. Для этого меняем значение свойства color у класса btn с #fff (белый цвет) на #ff0 (жёлтый):

Великолепно! Все необходимые правки мы внесли.

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

Чтобы изменить интерфейс сайта и видеть правки внешнего вида при каждой загрузке, необходимо перенести наши изменения в исходный код ресурса в файлы на удалённом или локальном веб-сервере (в зависимости от того, где расположен сейчас ваш ресурс).

Мы могли сразу править файлы, но тогда бы вам пришлось постоянно переключаться между программами и сохранять свои изменения на каждом шаге. А в случае расположения проекта на удалённом сервере пришлось бы ещё и скачивать/загружать требуемый файл при каждой правке, что отнимает много времени и нервов.

Поэтому я предпочитаю производить правки интерфейса сайта через инструменты разработчика в браузере, т.к. это быстро и наглядно, а потом уже применять их к файлам ресурса. Чего и вам советую 🙂

Итак, если у вас есть локальная копия проекта, то открываем редактор кода, NotePad++ в моём случае, и ищем объявление изменяемого нами CSS класса по файлам проекта. Нужно искать полное название класса, скопировав его из инструментов разработчика.

Например, если для изменения цвета шрифта кнопки я правил класс с названием #cart > .btn, то его мне и нужно искать:

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

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

Итак, объявление класса изменяемого элемента веб-интерфейса мы нашли:

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

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

Поочерёдно изменяем все классы, сохраняем файлы и копируем их на хостинг в соответствующие директории с помощью любого FTP или SSH клиента, например, FileZilla (путь к файлу можно узнать в редакторе кода при его открытии через результаты поиска), подтверждая замену существующих.

Если ваш интерфейс сайта находится только в разработке, и ресурс ещё расположен на локальном веб-сервере, то данный шаг производить, естественно, не стоит. Просто вводим адрес ресурса в веб-браузере и наслаждаемся результатом 🙂

Аналогичным способом вы сможете не только изменить цвет и размер кнопки на вашем сайте, но и изменить фон сайта; сделать фон сайта не только цветом, но и картинкой; узнать и корректировать размер, цвет и начертание шрифта вплоть до изменения структуры страницы сайта целиком.

Всё, что вам нужно будет, — это найти требуемый элемент дизайна сайта на странице с помощью инструментов разработчика и либо изменить его CSS свойства, либо удалить/добавить/переместить HTML элемент.

Главное, — это повторить в дальнейшем произведённые действия в исходном коде вашего сайта, чтобы они сохранились у вас при следующих загрузках в браузере, а не исчезли при первом же нажатии F5, что произойдёт с изменениями, внесёнными через инструменты разработчика браузера.

Ах да! Чуть не забыл 🙂 Иногда, даже при правильном произведении всех описанных действий, вы не увидите внесённых вами изменений в браузере после внесения изменений в исходный код сайта. В 99% случаях в данной ситуации будет виновен кэш. Кэш браузера либо серверное кэширование — тут нужно будет разбираться более детально.

Для начала очистите кэш браузера. В Google Chrome и Mozilla Firefox это делается комбинацией Ctrl+Shift+Del. В открывшемся меню нужно будет выбрать пункт Изображения и другие файлы, сохранённые в кэше, после чего нужно будет обновить страницу браузера.

Если изменения снова не применились, то ещё раз проверьте, правильно ли вы внесли свои правки дизайна сайта в его исходный код — и если да, то вам нужно будет очистить серверный кэш. Если вы меняли фон сайта или шапку на WordPress или другой CMS, то вам нужно будет вспомнить, какой плагин кэширования вы используете, и очистить его кэш в настройках.

Если же вы не пользуетесь плагинами кэширования либо описанные действия вам не помогли, то всё, что вам останется — обратиться к вашему хостинг провайдеру, чтобы он помог вам очистить кэш прямо на сервере.

Но, правды ради, стоит сказать, что такая возня возможна лишь в нескольких случаях из ста. Обычно всё ограничивается очисткой кэша браузера. Также при изменении внешнего вида сайта через инструменты разработчика не ленитесь проверять свои правки в разных веб браузерах.

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

Тут вам поможет данный сайт, который указывает, какие браузеры какое CSS свойство поддерживают. Также здесь вы найдёте примеры использования интересующих вас конструкций и их описание, чтобы вы могли понять, что оно делает.

Если у вас наблюдаются трудности с английским, то можете воспользоваться этим сайтом или этим. Для поиска конкретных свойств, естественно, нужно будет воспользоваться внутренним поиском по выбранному ресурсу.

Выводы по поводу изменения внешнего вида сайта

Вот и всё, что я хотел вам рассказать о том, как можно изменить интерфейс сайта самостоятельно.

Стоит признать, что я выбрал достаточно сложный пример для ознакомления с основами вёрстки сайта.

Но, как говорил великий А.Суворов, «Тяжело в учении – легко в бою!». Поэтому в дальнейшем, при внесении более простых изменений в интерфейс сайта, вы не будете испытывать каких-то сложностей, т.к. они будут вам даваться намного легче. И своими навыками вы сможете сэкономить не одну сотню долларов на редизайне сайта, и не один час времени работы специалиста, т.к. его услуги вам не потребуются 🙂

Напоследок я хочу поделиться с вами ещё одним лайфхаком, касающимся поиска CSS свойств элементов интерфейса сайта с помощью инструментов разработчика.

Иногда, при инспектировании требуемого объекта никак не удаётся найти требуемое свойство. Возникает ощущение, что программа издевается над нами: результат действия есть, а его описания нет 🙂

Но не стоит отчаиваться — изучите в инспекторе объектов (левая часть инструментов разработчика) элементы интерфейса сайта, которые вложены в найденный вами или в которых он находится.

Скорее всего, искомое свойство наследуется или принадлежит каким-то вложенным либо родительским элементам, поэтому внимательно изучайте их свойства — и вы обязательно найдёте искомое.

И последнее, что я хочу вам сегодня сказать, — самостоятельная вёрстка сайта, как и другие действия в нашей жизни, требует чувство меры. Поэтому не стоит сильно увлекаться всевозможными сферическими конями в вакууме и превращать ваш проект в сплошную абракадабру, делая его неудобным для пользователя и низкопродуктивным 🙂

Главное, чтобы после ваших изменений интерфейс сайта продолжал оставаться:

• универсальным — одинаково отображаться и выполнять одни и те же функции в разных веб-браузерах;
• простым — не должно быть лишних элементов;
• удобным — пользователю не нужно производить дополнительные, ненужные шаги;
• понятным пользователю — у него не должны возникать вопросы по поводу назначения элементов.

Единственное, что я сегодня не рассмотрел, но будет вам несомненно полезно при самостоятельных правках интерфейса сайта – это список самых распространённых CSS свойств элементов, манипуляции с которыми позволят вам довести их внешний вид до требуемой степени.

Поэтому я их обязательно приведу в своих ближайших публикациях. Всё, что вам нужно сделать, чтобы не пропустить их, — это подписаться на обновления проекта для получения уведомлений на email о выходе новых статей.

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

Всем удачи и до новых встреч! 🙂

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

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

Как понять с чего начать редизайн?

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

Опросник по причинам:

Почему необходимо провести редизайн?

Цель редизайна:

Обновить сайт и опередить ближайшего конкурента по трафику и позициям.

*Ваша цель может быть в абстрактной формулировке. Например, «обновить сайт, сделать его быстрее и удобнее» или «обновить сайт и опередить конкурентов по позициям и трафику». Но не забывайте расшифровывать свои цели и фиксировать их. Что значит быстрее, удобнее, больше трафика – всё это можно выразить в понятных цифрах, которые станут вашими KPI для проекта.

Определите и запланируйте ux-исследование

Данный этап проведения редизайна, фактически, единственный, который будет напрямую зависеть от «силы» бренда компании и желания компании создать «базу» для предстоящих работ.

Какие виды исследований можно запланировать:

Нужно отдавать себе отчёт, что состав работ редизайна для крупных компаний с сильным брендом будет значительно отличаться. Крупный бизнес располагает временем и бюджетами на проведение исследований в несколько итераций. Малый и средний бизнес заинтересован в проведении исследовательских работ в короткий срок. Выделить главное помогут простые исследования: Опрос клиентов и Конкурентный юзабилити аудит.

Изучите текущую аналитику и сравните с конкурентами

Пришло время вспомнить, что мы в сеошном треде. Встаём на место исполнителя редизайна проекта. Первое, что мы делаем «отсекаем» текущую ситуацию по проекту:

После фиксации текущей результативности определите положение компании на рынке и динамику проекта.

Например, вы 5 в Яндекс и 3 в Google. Соотнесите позиции с конкурентами. Проведите анализ по кластерам запросов.

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

Обратите внимание на «проседающие» кластеры — возможно, ваша структура «категорий» и конечных посадочных требует доработок. Если вы будете менять релевантные в процессе переезда – это потребует особого контроля и работы над ссылочным профилем. Отмечайте для себя, любые подобные изменения. Далее это найдёт своё отражение в структуре и карте редиректов.

Конкурентный юзабилити аудит

Основной и обязательный вид работ, предваряющий стадию отрисовки прототипов. Здесь вам нужно строго определить:

В результате у вас должно сформироваться понимание, что определённый функционал, предлагаемый в рамках редизайна, уникален или предлагает более широкие возможности, а на уровне страниц ваши блоки несут больше информации и пользы для пользователя. Конечным итогом должен стать перечень мер на доработку UX, структуры и функционала. Это работа нацелена на определение точек роста проекта.

Прототипирование и отрисовка макетов

Обычно прототипированию уделяется недостаточно времени, и серые прямоугольники одобряются с первой же итерации. На стадии дизайна обнаруживается, что вся структура страниц не подходит, требует пересмотра. Это одна из самых частых ошибок. Что ж, вы не должны её допустить, ведь все подготовительные работы, описанные выше, направлены на выработку корректной структуры страниц по типам страниц.

Двигайтесь к дизайну только после полностью проработанных прототипов. Если нужно максимально детализируйте прототип, но не используйте материалы дизайна. Это будет искажать восприятие прототипа, а ваши элементы на сайте должны быть универсальны. Вне зависимости от масштабов проекта придерживайтесь компонентного подхода. Реализовывать, поддерживать и оптимизировать такой проект будет менее затратно, с точки зрения времени и денег.

Сначала дайте необходимое для переезда:

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

Составьте ТЗ на редизайн

Выработайте единый документ, где будут указаны все требования к редизайну:

Ваше ТЗ должно стать руководством к проведению работы.

Выбирайте исполнителя и контролируйте ход выполнения работ

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

Отладьте процесс коммуникации и контроля работ. Будьте открыты и готовы к тому, что вопросы могут появится в ходе изучения даже идеального ТЗ. Обязательно закладывайте время на коммуникацию и ревью теста.

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

Содержание

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

Что такое редизайн сайта

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

Чтобы понять, нужно ли проводить редизайн сайта, ответьте на следующие вопросы:

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

Рассмотрим удачный пример редизайна интернет-магазина по продаже постеров и стикеров WallMonkeys

.
Изначально дизайнеры расположили поисковую строку в верхней части главной страницы, а кнопку «Начать покупки» – в центре. Однако после анализа карты кликов сайта разработчики выяснили, что чаще всего покупатели ищут товары через верхнюю панель. Тогда компания решила добавить поисковую строку в центр и разместить там скидочный купон. Редизайн помог увеличить конверсию сайта.

Неудачный опыт показала команда Яндекса при модернизации ресурса Кинопоиск. В 2013 году компания выкупила онлайн-кинотеатр и провела редизайн. В результате сайт стал медленнее работать, некоторые страницы не загружались. Посетители жаловались, что новым интерфейсом неудобно пользоваться, потому что разработчики убрали удобную систему фильтров фильмов и сериалов, перенесли раздел «Рецензии» на четвертый уровень структуры сайта.

Для понятности разберем уровни структуры – схему построения связей на сайте:

• первый – главная страница;
• второй – разделы, на которые переходят с главной страницы;
• третий – страницы, ссылки на которые есть на вкладках второго уровня и так далее.

Таким образом, чтобы ознакомиться с рецензиями кинокритиков, пользователю нужно сделать несколько переходов по ссылкам, что неудобно. В конце концов Яндекс вернул Кинопоиску старый дизайн.

Чтобы не допустить подобных ошибок, важно перед началом обновления ресурса провести опрос среди пользователей и проанализировать ответы респондентов. Так вы сможете узнать, что бы клиенты хотели изменить или добавить, и на основе этих данных улучшить пользовательский опыт (User Experience, UX) – субъективные ощущения пользователя от взаимодействия с сайтом.

На положительный UX влияют визуальное выделение элементов сайта (шрифт, его цвет и размер), свободное пространство между блоками, адаптивный дизайн (корректное отображение страницы на любом устройстве), привлекательная CTA-кнопка.

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

В каких случаях необходим редизайн сайта

Редизайн проводят, когда:

• имеющееся программное обеспечение и дизайн устарели;
• посетители отмечают низкое качество юзабилити сайта;
• компания обновляет фирменный стиль;
• сайт некорректно отображается на мобильных устройствах;
• руководители открывают новые направления бренда;
• организация отмечает снижение финансовых показателей;
• позиции сайта упали;
• изменилась стратегия контекстной рекламы.

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

Редизайн не принесет пользы, если вы не сформулируете проблему, то есть зачем именно нужно обновлять сайт. Например, цели редизайна могут быть следующие:

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

В задачи модернизации входят:

• анализ сайта для обнаружения технических проблем и неудобств при использовании;
• разработка нового интерфейса, структуры;
• верстка;
• добавление информационных и функциональных блоков;
• перенос данных на новую CMS (Content Management System ― система управления ресурсом).

Виды редизайна

Выбор степени модернизации зависит от того, какие цели вы преследуете при обновлении ресурса. Есть три вида редизайна сайта:

• Полный – это глобальное изменение структуры сайта, выбор другой CMS, смена адресов страниц, добавление большого количества функций, разработка нового дизайна. Полную модернизацию сайта проводят, когда имеющийся интерфейс устарел, или руководство изменило направление деятельности организации.
• Изменение только внешнего вида – обновление дизайна ресурса. Однако в некоторых случаях необходимо минимально доработать функционал страниц, чтобы новое оформление выглядело органично. Обычно дизайн перерабатывают таким образом, когда вносят изменения в фирменный стиль.

Для разработки современного сайта важно постоянно отслеживать новые тенденции в веб-дизайне. Ищите вдохновение на сайтах с работами художников со всего мира, например, на Awards.com, Behance, Webdesign-inspiration.com, Flickr.com, Ecomm.design.

• Частичный – модернизация функционала сайта. В этом случае разработчики добавляют или заменяют структурные блоки, например, обновляют шапку или футер, создают информационные разделы.

Этапы редизайна сайта

Редизайн состоит из восьми этапов:

1. Планирование и аналитика. Определите, зачем вам нужно проводить редизайн сайта: что вас не устраивает, что необходимо улучшить, каким вы видите результат реконструкции.

Чтобы сделать качественный редизайн, проведите исследование. Изучите тепловую карту кликов, данные вебвизора. Вы узнаете, на какие блоки посетители обращают внимание в первую очередь, просматривают ли они страницы до конца, сколько времени проводят на сайте.

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

Разработка дизайна.

1. Для создания проекта стоит пригласить веб-дизайнеров, маркетологов, SEO-специалистов. Они выполнят аудит, определят проблемные места и составят план выполнения работ.

После необходимо создать прототип – макет сайта с отображением всех его элементов: кнопок, меню, контактов, логотипов, форм, шапки, футера. Это позволит визуализировать проект и при необходимости доработать шаблон.

1. Верстка. На этом этапе художники создают дизайн интерфейса, разработчики пишут HTML-код. Важно предоставить программистам подробное и четко сформулированное техническое задание, чтобы получить продукт, который оправдает ваши ожидания.
2. Программирование и сборка сайта. Разработчики выбирают CMS, программируют ее и приспосабливают к заданному функционалу портала. Фронтендеры выполняют верстку.
3. Составление и наполнение сайта контентом. Убедитесь, что редизайн совпадает с заявленными требованиями. Если все в порядке, загружайте изображения, видео и тексты на сайт.
4. Тестирование. Откройте сайт в нескольких браузерах, зайдите во все разделы, убедитесь, что все корректно работает, открывается, ресурсом удобно пользоваться. Предложите протестировать сайт наиболее лояльным клиентам. В случае обнаружения ошибок в работе зафиксируйте их и сообщите о проблемах программистам.
5. Релиз. Перенесите ресурс на CMS-хостинг и запустите сайт. На главной странице можно рассказать аудитории, почему вы решили провести редизайн, в чем преимущества для клиентов. Так пользователи лояльнее воспримут переход к новой версии сайта.
6. Развитие проекта. Регулярно выполняйте аналитику – отслеживайте, сколько времени посетители проводят на ресурсе, сколько страниц они просматривают, с какого источника переходят, как часто выполняют целевые действия. При необходимости оптимизируйте сайт.

Как не потерять позиции в поисковой выдаче при редизайне

Если до редизайна у сайта были высокие позиции в выдаче, и вы хотите их сохранить, рекомендуем придерживаться следующих советов:

• Сохраните HTML-теги. К ним относят элементы заголовков (H1, H2, H3 и другие) и форматирования текста (b для выделения полужирным, i – курсивом, ul – создания маркированного списка). Важно не удалять и не изменять теги при верстке сайта.
• Не меняйте структуру портала. Не стоит создавать новые разделы и страницы или удалять их. В противном случае у страниц будут новые URL-адреса, которые будут проиндексированы заново. Это повлияет на их позиции в поисковой выдаче.
• Ставьте теги noindex для новых блоков и атрибут nofollow для ссылок. Это необходимо, чтобы не потерять позиции сайта. Постепенно добавляйте теги и атрибуты для каждого нового вида контента и анализируйте, как они влияют на ранжирование ресурса. Таким способом вы сможете легко вернуть изменения, если заметите снижение позиций.

В какую стоимость обойдется редизайн сайта

Затраты на редизайн складывают из следующих параметров:

• Дизайн. Стоимость разработки составит примерно 150 000 рублей.
• Верстка. Размещение всех элементов сайта стоит 100 000 рублей. Адаптация макета для мобильных устройств – 50 000 рублей.
• Переезд с CMS. Стоимость переноса данных на другую систему управления сайтом и разработки функционала составит от 50 000 до 150 000 рублей в зависимости от сложности и объема задач.
• Оптимизация для сохранения позиций в поисковике. Стоимость минимальных работ вроде переноса HTML-тегов и подключения инструментов веб-аналитики начинается от 10 000 рублей.
• Управление проектом. Если вы хотите получить качественный продукт в согласованные сроки, доверьте контроль процессов профессионалу. Его услуги стоят в среднем 50 000 рублей.

Таким образом, стоимость полного редизайна обойдется примерно в 410 000-510 000 рублей. Соответственно, частичная модернизация, например, изменение функционала, будет стоит до 150 000 рублей. Обновление дизайна – в среднем 150 000 рублей.

Типичные ошибки при редизайне сайта

Рассмотрим распространенные ошибки при обновлении ресурса:

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

Коротко о главном

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

От автора: всем привет! Сегодня мы поговорим на очень актуальную тему — изменение дизайна сайта. Не понимаете, зачем это нужно? Тогда ответьте-ка мне на простой вопрос. В чем суть создания популярного сайта? Конечно же, в модном и актуальном дизайне! С дизайна вообще начинается любой проект: коммерческий, некоммерческий, любительский или высокопрофессиональный.

Я много раз писал о том, что мастер веб-дизайна должен быть креативным, должен искать новые решения обыденных ситуаций, следить за модой… Но к сожалению, мода — продукт быстро изменчивый, и то, что сегодня кажется новаторским, завтра уже становится ширпотребом, расползается в массы, копируется 100500 раз, и, наконец, приедается. Что же делать? Ищем ответ в этой статье 🙂

А не пора бы и мне…

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

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

Как правило, подобные статьи о необходимости в изменениях дизайна сайта пишутся не для дизайнеров (мы-то с вами и так понимаем, что обновление — это кислород для кровеносных сосудов проекта), а для заказчиков, так сказать, юзеров. Поэтому сегодня я не буду говорить зачем, а расскажу лучше, как привести сайт в порядок. Для максимальной эффективности можно совместить этот урок с обучающим курсом.

Страшное слово «редизайн»

Вы не поверите, но именно так отзываются на предложение обновиться большинство сайтов. Я бы сказал, для многих редизайн ассоциируется с походом к стоматологу: «Ну, может еще потерпит?», «А может сам перестанет барахлить?», «А может не так уж все и плохо?».

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

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

Ну, хорошо, решение о том, что дизайн сайта нужно изменить, принято. Идем дальше.

Градация задач на значительные и косметические

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

Предлагаю вам несколько советов по освоению косметического редизайна:

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

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

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

В целом, это все, что я хотел вам сегодня рассказать. Теперь мы знаем, как изменить дизайн сайта, когда это необходимо. Но все же остановлюсь еще на одном важном моменте. Это вам бонус от меня!

Потери позиций: рестарт

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

Теперь точно все. Желаю вам успехов! У меня на очереди еще много интересных тем и советов, подписывайтесь на обновления и до скорых встреч! Пока-пока.

Итак, у вас есть готовый сайт на UMI.ru. С профессиональным дизайном, тщательно спроектированными интерфейсами, настроенными стилями форматирования. Но что делать, если текущий шаблон вам не совсем подходит: хочется изменить внешний вид сайта, поиграть с цветами, адаптировать веб-страницы под ваш корпоративный стиль или ваше видение? Как изменить сайт?

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

А можно такой же, но с перламутровыми пуговицами? Да!

• Поставьте ваш логотип в левом верхнем углу сайта. Если у вас нет логотипа – это может быть любое имиджевое изображение, дающее понять, чему посвящен сайт. Это может быть даже ваша фотография – если бизнес привязан к вашей личности (например, уроки английского языка).
• Замените основное имиджевое изображение в “шапке” сайта. Это ключевой элемент вашего брендинга и первое, что увидит посетитель вашего сайта, поэтому подбирайте изображение очень тщательно. Оно должно быть качественным, демонстрировать суть вашего предложения и особенности позиционирования. Использовать его можно также в качестве временного или постоянного баннера, рекламирующего какое-либо предложение или акцию.
• Добавьте картинки, иллюстрирующие текст сайта. Это легко сделать при помощи визуального редактора. Иллюстрации в тексте нужны, но, в зависимости от использования, они могут как улучшить сайт, так и испортить его. Про то, как грамотно работать с изображениями для веб-страниц, мы поговорим отдельно, в другой раз.

Исходный шаблон дизайна:

Шаблон, измененный при помощи картинок:

2. Самый радикальный способ — изменить шаблон дизайна.

Этот способ подойдет, если вы хотите полностью изменить внешний вид сайта, выбрав другую тематику оформления. Для этого просто зайдите в раздел “Дизайн – Смена дизайна” в панели управления вашего сайта и выберите новый дизайн. При этом, вы можете сохранить все внесенные изменения: тексты, картинки, структуру, объекты каталога и т.д.

3. Самый творческий способ — редактирование стилей CSS.

CSS — это технология описания внешнего вида веб-страниц, написанных на языке разметки HTML. Определенные стили CSS уже применены к готовым сайтам на UMI.ru и описывают внешний вид всех элементов: текстов, кнопок, ссылок, меню, “хлебных кошек” и др. Для их изменения необходимо прописать новые стили в специальном файле, который находится в разделе “Дизайн” — “Управление CSS” в панели управления вашего сайта (доступно на платном тарифе).

С помощью стилей CSS можно изменить:

• фон сайта (вставить фоновую картинку или поменять цвет)
• цвет, расположение и угол наклона объектов
• шрифты
• форматирование абзацев
• добавить тени, рамки или закругления объектам
• передвинуть блоки или изменить их форму
• многое другое.

Все это можно сделать самостоятельно, но вам потребуются некоторые базовые знания о редактировании стилей CSS. Не пугайтесь, вам не придется сочинять код: все стили уже есть в специальных учебниках. Разобраться в основах вам поможет отличный самоучитель CSS — htmlbook.ru, а получить нужный код — генераторы CSS:  css3maker.com и css3generator.com. А если у вас есть знакомые, знающие язык HTML, то они с легкостью помогут в редактировании стилей.

И сайт превращается…

Как изменить сайт при помощи CSS и посмотреть, какие стили уже применены к элементам страниц — вы узнаете из нашего руководства. 

А чтобы вы поняли, насколько это легко — разберем несколько примеров.

Действия с объектами

Первая задача: изменение цвета кнопки с голубого на красный.

Перед тем, как изменить сайт, не забудьте сохранить его резервную копию — тогда вы сможете его легко восстановить с случае неполадок. Теперь можно приступать к редактированию. При помощи инструмента инспектирования кода (в нашем примере использован Firebug в браузере Mozilla Firefox) находим код необходимого элемента — в данном случае, это код кнопки:

В правом окошке инспектора “Стиль” прописан код, обозначенный разными цветами:  

• черным — класс (в данном случае, кнопка),
• зеленым — CSS-свойство (в данном случае, цвет),
• синим — значение (в данном случае, голубой),
• зачеркнутый код обозначает, что данный стиль не работает, поскольку конфликтует с другим, более приоритетным стилем.

Мы видим, что класс кнопки называется .direction_title. Чтобы понять, какой фрагмент представленного кода отвечает за цвет, можно “перевести” зеленые теги, воспользовавшись поиском в справочнике. За цвет фона кнопки отвечает свойство background (не путайте со свойством color, оно отвечает за цвет шрифта). Сейчас кнопке присвоен стиль background: #1f1f1f; где background — это свойство, определяющее стиль фона, а #1f1f1f — голубой цвет в шестнадцатеричной кодировке цвета.

Чтобы сделать кнопку красной, нужно узнать цифровой код красного цвета. Его можно посмотреть с помощью онлайн-палитры, либо в любом графическом редакторе, которым вы привыкли пользоваться (например, Microsoft Paint, Photoshop, онлайн-редактор и т.п.). Итак, код красного цвета — #ff0000:

Теперь перейдем в раздел “Дизайн” — “Управление CSS” админзоны нашего сайта и пропишем новое значение для класса кнопки, соблюдая тот же синтаксис, что показывает инспектор в исходном коде: между открывающей и закрывающей фигурной скобкой помещают CSS-свойства со значениями, разделяя их знаком “;”.

Что получилось:
 

    Было                                                                                                   Стало

 

Вторая задача: перемещение кнопки вверх и вправо на 100px.

Для начала посмотрим значения текущего расположения кнопки с помощью инспектора, если нужно — “переведем” через самоучитель. Сейчас стоят значения bottom: 20px; left: 40px; где bottom — расстояние от нижнего края кнопки до нижнего края родительского блока, а left — расстояние от левого края кнопки до левого края родительского блока.

Таким образом, для перемещения кнопки вверх и вправо на 100px нужно прибавить по 100px снизу и слева — получится 120px снизу и 140px слева. Добавим новые значения в наш файл стилей к уже прописанному классу нашей кнопки .direction_title, соблюдая синтаксис исходного кода:

Что получилось:

    Было                                                                                                  Стало

Изменение шрифтов

При редактировании некоторых текстовых полей на готовых сайтах не появляется визуальный редактор, а потому нельзя стандартным способом изменить цвет, размер и начертание шрифта. Это могут быть заголовки, анонсы новостей, цены на товары, контактные данные в шапке сайта, надписи на кнопках и др. Мы сделали это умышленно: настроили лучшие шрифты, самые удобные для чтения и оптимально подходящие к дизайну сайта. Но если все же вам потребуется изменить стиль этих элементов, то это можно сделать при помощи CSS.

Задача: изменить размер и цвет шрифта в заголовке “Новости”.

Найдем класс заголовка и значения стилей при помощи инспектора кода Firebug, если нужно — “переведем” значения через справочник.

Мы видим, что класс заголовка “Новости” называется .shop-heading, за размер шрифта отвечает свойство font-size, значение которого сейчас — 18px; а за цвет — свойство color со значением #111111 (темно-серый).

Перейдем в раздел “Дизайн” — ”Управление CSS” админзоны сайта и изменим эти значения на нужные нам. Например, увеличим размер до 28px, а цвет изменим на красный. Как вы помните, цвет указывается в шестнадцатеричном коде:

Сохраняем и смотрим, что получилось. Обратите внимание, что при изменении стиля элемента внешний вид поменяют ВСЕ элементы на сайте, к которым применен данный стиль. В нашем случае, стиль .shop-heading применен к заголовкам “Новости” и “Популярные товары”.

Что получилось:

Было                                                                                                          Стало

Еще несколько примеров работы с CSS описаны в нашем руководстве.

Возможные сложности

2. Вам не понравился результат работы со стилями. Решение: просто очистить файл стилей CSS в админзоне.

3. Если после изменения CSS вы сменили шаблон дизайна, то прописанные вами стили сохранятся, но могут не работать в случае, если на новом шаблоне используется другая верстка. Решение: внести изменения в CSS заново, с учетом новой верстки.