HTML
Некоторые полезные знания.
Классы и другие опции в теге <html>
class="no-js no-svg"
Для наглядности изложения будем создавать начало кода для сайта tcsfera.ru.
Для начала можно написать так:
<!DOCTYPE html>
<html class="no-js no-svg" lang="en" dir="ltr" >
<head>
<title>СФЕРА - торговый центр премимум класса</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
Здесь мы используем в теге <html> два класса - no-js и no-svg, а также два псевдокласса lang="en" и dir="ltr". Разберемся - что есть что?
Класс no-js используется в том случае, если мы планируем в файле style.css прописать специальные стили для элементов для случая, когда браузер клиента не поддерживает js-scripts.
Как пишут в инете, доля таких клиентов 0,1%. Это или пользователи старых браузеров, или те, кто отключил JS намеренно из своих соображений. Тратить время на адаптацию вашего сайта для таких клиентов или нет - решать Вам.
Мы не будем.
Класс no-svg используется в том случае, когда браузер не поддерживает формат изображений svg. В этом случае в файле стилей следует прописать альтернативные картинки, например png.
Так как мы для этого сайта используем логотипы в векторном варианте, то предусмотреть такую замену следует.
Псевдоклассы lang="en" и dir="ltr"
Использование этих псевдоклассов целесообразно для многоязычных сайтов. По псевдоклассу lang браузер определяет, на каком языке написано содержание сайта. Это помогает правильно отобразить некоторые символы (например кавычки
в русском и английском текстах отображаются по-разному), правильно расставить переносы и т.п. Для расстановки переносов рекомендуется также в таблице стилей разместить
p {
-moz-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
auto.
Псевдокласс dir сообщает браузеру, в каком направлении отображается содержание: слева направо
ltr (Left To Right) или справа налево rtl (Right To Left). Например, на некоторых израильских сайтах не пренебрегают этим псевдоклассом и указывают dir="rtl". Вцелом, указывать эти псевдоклассы не обязательно.
Тег <title> - заголовок документа
Здесь всё предельно ясно - это заголовок документа и он отображается при наведении курсора на закладку сайта в браузере.
Кодировка документа
Сообщить браузеру, в какой кодировке находятся символы веб-страницы, можно двумя способами:
<meta charset="utf-8">
или
<meta http-equiv="content-type" content="text/html; charset=utf-8">
И то, и другое - верно. Я предпочитаю второй вариант.
Оптимизация под мобильные устройства
Добавим ещё три мета-тега:
<!DOCTYPE html>
<html class="no-js no-svg" lang="en" dir="ltr" >
<head>
<title>СФЕРА - торговый центр премимум класса</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="HandheldFriendly" content="true">
<meta name="MobileOptimized" content="width">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Эти мета-теги предназначены для мобильных устройств, чтобы предотвратить попытки браузеров масштабировать сайт. Это нам не нужно, так как мы и так делаем адаптивную вёрстку под мобильные устройства.
Первые два тега <meta name="HandheldFriendly" content="true"> и <meta name="MobileOptimized" content="width"> предназначены для старых браузеров, а третий
<meta name="viewport" content="width=device-width, initial-scale=1.0"> заменяет первые два для новых браузеров. Мы оставим все три.
Подробнее об этих и других тегах для оптимизации сайта под мобильные устройства можно посмотреть здесь или здесь.
Микроразметка
Open Graph разметка
Подробно описано здесь
Итак, что мы хотим и для чего нам это нужно? Мы хотим, чтобы при публикации ссылки на наш сайт в какой-либо соц. сети кем-либо эта ссылка выглядела красиво и содержала нужную нам информацию о нашем сайте.
Такая возможность нам предоставляется социальными сетями, так как все они анализируют наш сайт своими краулерами и извлекают из нашего сайта соответствующую информацию. Но наша задача
помочь краулеру извлечь ту информацию, которую мы хотим. Для этого разработаны стандарты (такие как Open Graph и Schema.org) и придуманы соответствующие метатеги, которые стали уже общепринятыми. Этим мы и воспользуемся.
Добавим эти метатеги:
<!DOCTYPE html>
<html class="no-js no-svg" lang="en" dir="ltr" >
<head>
<title>СФЕРА - торговый центр премимум класса</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="HandheldFriendly" content="true">
<meta name="MobileOptimized" content="width">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:site_name" content="СФЕРА - Торговый Центр" />
<meta property="og:type" content="website" />
<meta property="og:url" content="//www.tcsfera.ru/" />
<meta property="og:title" content="СФЕРА - Торговый Центр" />
<meta property="og:description" content="The official site of SFERA Shopping Center, Moscow, Russia." />
<meta property="og:image" content="<?php echo $current_page_url; ?>images/ogg.jpg" />
<meta property="og:image:width" content="960" />
<meta property="og:image:height" content="540" />
<meta property="og:video" content="//www.tcsfera.ru/video/fashion-4.mp4" />
<meta property="og:video:secure_url" content="https://www.tcsfera.ru/video/fashion-4.mp4" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video:width" content="960" />
<meta property="og:video:height" content="540" />
<meta property="fb:app_id" content="273013416466702" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:url" content="<?php echo $current_page_url; ?>" />
<meta name="twitter:title" content="СФЕРА - Торговый Центр" />
<meta name="twitter:description" content="The official site of SFERA Shopping Center, Moscow, Russia." />
<meta itemprop="name" name="name" content="СФЕРА - Торговый Центр">
<meta itemprop="description" name="description" content="The official site of SFERA Shopping Center, Moscow, Russia.">
</head>
Вот как эти данные использует и представляет VK:
Вот как эти данные использует и представляет Twitter:
Макет
Иконки
Иконки не только украшают сайт и делают его привлекательным, но и являются очень удобным и полезным визуальным средством для разметки содержания, логистики и интерфейса и т.п. Вот на этом ресурсе собрано огромное количество иконок
Логотип
Векторные картинки
Все современные браузеры понимают картинки в формате .svg - векторные картинки. Для изображений иконок и логотипов иногда целесообразно использовать изображения именно в векторном формате, так как качество таких
изображений не зависит от размеров картинки. Однако, мы столкнулись с проблемой загрузки .svg картинок на WordPress. Решение описано здесь
Шрифты
Проблемы
Красивые шрифты украшают сайт, а часто делают текст более читабельным. Проблема состоит в том, что все браузеры имеют хотя и большой, но ограниченный набор отображаемых шрифтов, особенно кириллических.
Поэтому требуется подгружать нужный шрифт в файл styles.css или какой-либо другой, который подгружается в браузер в процессе загрузки страницы сайта. Но сначала нужно подобрать шрифт для сайта и скачать из источника (лучше от разработчика).
Приведу пару примеров. При разработке сайта Nicole-Mari по желанию заказчика для заголовков требовалось использовать шрифт Oswald. Оказалось, что этот шрифт не поддерживает кириллицу.
Особенность шрифта в том, что он достаточно компактный, а стандартные альтернативные шрифты HelveticaNeue-Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif делают текст слишком широким. Стали искать сжатые (condensed) шрифты для кириллицы.
Большая коллекция кириллических шрифтов есть на сайте AllFonts.ru. Нашли и скачали похожий шрифт BebasNeue здесь. Сравните.
Этот шрифт устроил заказчика и оказался, по нашему мнению, ещё более удачным выбором для этого сайта.
Аналогично пришлось искать аналог шрифту Poppins. Нашли похожий шрифт AGAvantGardeCyr Book на том же сайте AllFonts.ru.
Установка шрифта на сайте