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

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

Это практические советы, которые вы можете использовать прямо сейчас и они повысят лояльность ваших пользователей.

1. Наведение курсора

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

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

И секрет в том, что это очень легко осуществить. В свойства класса кнопки нужно лишь добавить соответствующий стиль transition. Смотрите пример ниже:

.btn{
     background: #000;
     transition: 0.5s ease all;
}
.btn:hover{
     background: #FF9800;
}

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

Без стиля transition:

Без transition

Со стилем transition:

С transition

 

Свойство transition включает в себя transition-delay, transition-duration, transition-property, transition-timing-function. Чтобы узнать все возможности читайте полное руководство по данному свойству: CSS Transitions.

2. Не подчеркивайте ссылки

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

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

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

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

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

Не подчеркивайте ссылки

Всегда проверяйте, чтоб при наведении курсора на кнопку, текст внутри не подчеркивался линией. Для этого используется свойство CSS text-decoration: none.

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

Интересное подчеркивание ссылки

3. Ссылка на всю кнопку

Чтобы ссылка <a></a> внутри кнопки <botton></botton> работала не только по тексту ссылки, но и по нажатию на всю кнопку, нужно использовать свойство CSS для ссылки: display: block.

<botton><a href="site.html">Ссылка в кнопке</a></botton>

Свойство CSS для ссылки внутри кнопки:

botton a{
    display: block;
}

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

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

4. Ссылка на весь блок.

Когда дело доходит до ссылки на блок продуктов, верстальщики часто забывают поставить ссылку на весь блок продукта или статьи, а не только на кнопку “Посмотреть”, которую ставят как правило внизу блока.

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

5. Ссылки на почту и телефон.

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

Это делается с помощью ключевого слова mailto, а после двоеточия повторяете адрес почты:

<a href="mailto:[email protected]">[email protected]</a>

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

6. Открытие ссылки в новой вкладке

Используйте атрибут target=”_blank” для тех ссылок, которые ведут на сторонние ресурсы либо не являются главными на вашем сайте. Это могут быть “Политика конфиденциальности” или например, “Настройка cookies” или ссылка на GoogleMaps с вашим адресом.

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

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

Подписывайтесь на наш инстаграм @_pro_web будьте в курсе новый статей и оставляйте там свои комментарии.

Автор

Оставляйте комментарии на @_pro_web