Не каждый веб-разработчик при верстке отдает себе отчет, что он делает. Качественная оцифровка дизайн-макета - это не просто pixel-perfect перевод в HTML и CSS - это соблюдение базовых требований юзабилити. Точно так же, как дизайнер должен иметь представление о том, что такое верстка, чтобы не рисовать оторваннный от реальности тяжело программируемый сюр, так же и веб-разработчик, должен следить за соблюдением базовых правил юзабилити. Давайте с ними ознакомимся ниже.
1 Favicon - задайте ее
Иконка на вкладке казалось бы мелочь, но очень существенная. Не поленитесь - вырежьте ее из логотипа (очень часто иконка из логотипа подходит под эту роль). Если пиктограмма в лого плохо вписывается в маленький квадрат - возьмите первую букву названия продукта/организации и соотнесите ее с фоном в фирменных цветах.
2 HOVER эффект у ссылки ВСЕГДА ДОЛЖЕН БЫТЬ
2.1 Hover-эффект в меню должен быть равен active (selected)
Речь идет о меню в шапке, либо боковом. На дизайн-макете, почти всегда один из пунктов меню выделяется на фоне остальных. К примеру, если мы на главной, то пункт меню Главная будет выделен по особенному (цветом / фоном / подчеркиванием) - так называемый active стиль ссылки. Стиль по наведению на другие пункты меню (hover) надо делать точно таким же, как active.
2.2 Эффект hover для ссылок в тексте
Верным эффектом для ссылки в тексте является инвертирование подчеркивания. Если в макете отрисована цветная ссылка с подчеркиванием, при наведении надо с нее убрать подчеркивание. И наоборот: если в тексте ссылка стоит с underline: none, то при наведении курсора мыши - должна появляться линия под текстом. Третий цвет вводить не надо!
2.3 Как поменять фон кнопки при ховере
Для этого руководствуются двумя основными правилами:
- Кнопка должна оставаться контрастной
- цвет текста к фону кнопки
- фон кнопки к фону блока
- Кнопка должна остаться в фирменных цветах
Если в фирменных цветах больше одного цветового оттенка (не считая черного и белого), и фон блока нейтрален, то конечно можно поменять фон на другой цвет из лого.
Если вариант выше не работает, то всегда можно выбрать в колорпикере оттенок более темный. Градации без колорпикера можно подобрать при помощи общедоступных таблиц, например цветовой палитры Material Design.
Пример ховер эффекта, когда кнопка осталась контрастной приведен на схеме ниже.
3 Фиксируйте Шапку
3.1 Меню должно всегда оставаться сверху страницы.
Кнопка наверх даавно уже канула в Лету. Меню всегда должно быть под рукой - это реально очень удобно.
3.2 Если фон шапки белый - добавить под него тень
Если вы зафиксировали шапку, а на странице есть блоки на белом фоне, то нужно добавить тень. Шапка не должна сливаться с белым фоном. Достаточно такой тени:
box-shadow: 0 0 20px #cecece;
4 Дайте сайту шанс выйти в топ - пощадите SEO!
4.1 Ссылки, ведущие на другие сайты, должны открываться в новом окне
Это конечно больше касается нужд SEO-продвижения - но не писать же об этом отдельную статью :)
4.2 Задавайте alt и title для изображений
Не оставляйте пустыми атрибуты alt и title для изображений - они важны для SEO. А для вашего мозга важны упражнения, чтобы он не превратился в бесполезное желе. Просто прорезюмирууйте 2-3 словами по смыслу, о чем говорит иллюстрация для этого блока - и запишите эти ключевые слова в alt и скопируйте их в title.
4.3 Давайте изображениям осмысленные имена
Во время натяжки сайта на движок конечно чать изображений подставиться автоматически. Но вы не знаете, какая. Поэтмоу углубляйте свои знания английского. Выучите не только слово logo, но еще product, cover, contact, about и прочие несложные слова по смыслу. Они короткие и ваша верстка будет приносить реальную пользу. Плохое название для изображения (цифры, исходное название файла) - это как тухло яйцо, которое просто провоняет по итогу сайт. Его обязательно найдут и вспомнят вас недобрым словом - оно вам надо?
5 Не допускайте искажения пропорции изображения
Следите, чтобы изобржаения не ужимались и не растягвиалиь непропорционально своему размеру.
