Классы и другие опции в теге <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;
}
		
	
Но я нигде пока не встречал, чтобы это делалось, да к тому же, как пишут, браузер Chrome не поддерживает значение 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="http://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="http://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:

Представление ссылки на сайт Vkontakte

Вот как эти данные использует и представляет Twitter:

Представление ссылки на сайт в твиттере

Макет

Иконки

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

Логотип

Векторные картинки

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

Шрифты

Проблемы

Красивые шрифты украшают сайт, а часто делают текст более читабельным. Проблема состоит в том, что все браузеры имеют хотя и большой, но ограниченный набор отображаемых шрифтов, особенно кириллических. Поэтому требуется подгружать нужный шрифт в файл styles.css или какой-либо другой, который подгружается в браузер в процессе загрузки страницы сайта. Но сначала нужно подобрать шрифт для сайта и скачать из источника (лучше от разработчика). Приведу пару примеров. При разработке сайта Nicole-Mari по желанию заказчика для заголовков требовалось использовать шрифт Oswald. Оказалось, что этот шрифт не поддерживает кириллицу. Особенность шрифта в том, что он достаточно компактный, а стандартные альтернативные шрифты HelveticaNeue-Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif делают текст слишком широким. Стали искать сжатые (condensed) шрифты для кириллицы. Большая коллекция кириллических шрифтов есть на сайте AllFonts.ru. Нашли и скачали похожий шрифт BebasNeue здесь. Сравните.

сжатый шрифт BebasNeue для отображения текстов на кириллице

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

Аналогично пришлось искать аналог шрифту Poppins. Нашли похожий шрифт AGAvantGardeCyr Book на том же сайте AllFonts.ru.

Установка шрифта на сайте