Все, кто привык к полноценно оформленным страницам сайтов, предпочитает вид «прибитого» (прилипающего, sticky) к низу футера страницы. Но есть в интернете две беды: нерастущие вниз поля ввода и неприбитые (к низу окна) футеры. Например, когда открываем короткие по высоте страницы типа habrahabr.ru/settings/social - сразу бросается в глаза, что информация, призванная быть в нижней части окна просмотра, прилипает к содержанию и находится где-то посередине, а то и в верхней части окна, когда внизу - пусто.
Так, вместо того, чтобы .
Данное пособие для начинающих верстальщиков покажет, как за 45 минут сделать «прибитый» футер, исправив недоработки даже такого уважаемого издания, как Хабр, потягаться с ним в качестве исполнения своего перспективного проекта.
Посмотрим на реализацию одного вида прибитого футера, взятого из сети, и попробуем разобраться в происходящем. css-tricks.com/snippets/css/sticky-footer
CSS:
* { margin:0; padding:0; }
html, body, #wrap { height: 100%; }
body > #wrap {height: auto; min-height: 100%;}
#main { padding-bottom: 150px; } /* must be same height as the footer */
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
HTML:
Футер помещают вслед за этим блоком и делают ему 0 пикселей высоты. Вообще, можно вслед за #layout поставить сколько угодно блоков, но все они должны быть или с 0 пикселей высоты, или вне потока документа (не position: static ). И есть ещё один важный фокус, которым обычно пользуются. Не обязательно делать высоту, равную 0. Можно сделать высоту фиксированной, но из основного блока вычесть её за счёт свойства margin-bottom: -(высота); .
Говоря человеческим языком, стилями делается пустой «карман» снизу, в который вкладывается футер, и он всегда оказывается или прилепленным к нижней границе окна, или к нижней границе документа, если документ по высоте больше высоты окна. По интернету и на Хабре существует множество реализаций футера, с разной успешностью работы во всех браузерах. Продолжим строить его самостоятельно, используя вёрстку Хабра как «рабочую лошадку».
Поскольку низ блока #layout
- это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением - мы не можем делать пустой карман за счёт padding
в #layout
, потому что тогда он станет больше 100%. Не спасёт и margin
- пустоту нужно делать за счёт свойств вложенных элементов. Плюс ко всему, надо обеспечить невылезание под границу блока плавающих элементов, что делается, например, блоком
Посмотрим на строение страниц нашего подопытного. Для этого проще всего раскрыть окно Firebug или подобное окно («Инструменты разработчика» (Ctrl-F12)) в Chrome.
Пункт 4 - придётся прорисовывать скриптом.
C третьим пунктом разобраться, казалось бы, просто, добавив #layout{margin-top:-90px;}
Но вспомним, что этого блока может не быть - он подавляется баннерорезкой, или рекламщики его вдруг решат не показывать. Есть ряд страниц сайта, где его нет. Поэтому зависимость margin-top
от рекламного блока - плохая идея. Гораздо лучше - разместить его внутри #layout
- тогда он ничем не будет мешать.
Первый пункт - чтобы прибитый футер вообще заработал, надо блок футера поместить под #layout . Впрочем, с помощью javascript можно реализовать и другие схемы прибитого футера, но в любом случае нужен JS или изначально правильная вёрстка, чтобы обойтись без него.
Поскольку мы не можем быть сильнее самого последнего верстальщика сайта, «влепившего» футер внутрь содержания, отложим идею правильного размещения футера на свой будущий сайт (который, стало быть, будет «круче» Хабра!), а Хабр препарируем джаваскриптом (юзерскриптом) до правильного состояния. (Сразу скажем, виноват не верстальщик, не стрелочник, а вид сайта, конечно, определяет стратегическое решение руководства проекта.) Так мы не достигнем идеала, потому что в первую секунду-две в процессе загрузки страница будет с неправильной вёрсткой. Но для нас важен концепт и возможность превзойти по качеству самый популярный сайт мира айтишников.
Поэтому в нужном месте скрипта (пораньше, в конце загрузки страницы) напишем переносы DOM-блоков рекламы и футера на нужные места. (Приготовимся к тому, что за счёт юзерскриптов решение будет сложнее чистого.)
var dQ = function(q){return document.querySelector(q);} //для сокращения
var topL = dQ("#topline"), lay = dQ("#layout"), foot = dQ("#footer");
if(topL && lay) //баннер - внутрь блока контента
lay.insertBefore(topL, lay.firstChild);
if(lay && foot && lay.nextSibling) //перенос футера
lay.parentNode.insertBefore(footer, lay.nextSibling);
Расставили блоки по местам - теперь осталось приписать элементам нужные свойства. Высоту футера придётся задавать точно, просто потому что мы её уже знаем к моменту действия юзерскрипта (конец загрузки страницы). Из-за точки срабатывания юзерскрипта, как уже говорилось выше, прыжок отображения футера на странице неизбежен. Можно пытаться делать «хорошее лицо», но при «плохой игре»? Зачем? «Плохая игра» сайта позволяет сделать без сверхусилий концепт, которого будет достаточно для оценки качества и не понадобится при «правильной игре» на своём проекте.
if(foot){ //блок-выравниватель
С этими кусочками кода мы сможем увидеть в юзерскрипте прибитый футер (после прыжка его вниз) и полностью осознать, как надо строить вёрстку страниц. Использовать прыгающий дизайн повседневно - неприятно, поэтому рекомендуется его сделать исключительно для демонстрации и тестирования. В юзерскрипте HabrAjax я установил аналогичный скрипт, закрыв его настройкой «underFooter» (установить «галочку» в списке настроек перед «прибитый к низу футер»), начиная с версии 0.883_2012-09-12.
Затрагивает ли прибитый футер необходимость обновления стилей ZenComment , если они установлены? Да, затрагивает. Из-за сложной цепочки приоритетов стилей, в которых стили, вставляемые юзерскриптом, имеют низший приоритет, пришлось немного подкорректировать юзерстили для возможности работы с прибитым футером. Если вы не обновите юзерстили (до 2.66_2012-09-12 +) - футер будет работать неточно.
Блок rotated_post (три популярных поста из прошлого) логичнее смотрится при футере, поэтому в реальном скрипте он тоже перенесён в футер.
Второй пункт (из списка недостатков вёрстки) - рассуждения чисто для Хабра (к юзерскрипту не относятся и частично повторяют прежние).
У страниц имеется проблема, мешающая сделать прибитый футер на чистом CSS - неопределённая высота футера, зависящая от размеров шрифта по умолчанию в браузере. Для реализации футера на CSS требуется подобрать относительные высоты шрифтов, но и они могут не сработать, если на компьютере пользователя не будет предусмотренных шрифтов. Поэтому решение должно включать джаваскрипт, который может подгонять переходами (transitions) приблизительное положение футера до точного. Или, посмотрев на приемлемость сделанного решения на юзерскрипте на разных платформах, сделать вычисляемую установку прибитого футера - первые наблюдения показывают, что решение практично.
Вывод: полноценно оформить раскладку на Хабре можно, но для этого нужен верстальщик, чётко понимающий поведение раскладки, располагающий блоки в правильном порядке. (Сейчас футер и верхний баннер стоят «не там» и не так, чтобы просто стилями получить прибитый футер.) Можно обойтись без JS, если задать высоту футера в относительных единицах, взяв некоторый запас места на неопределённость шрифта.
1) Firefox - неожиданное отсутствие прыжков футера. Странно, что их нет - отрисовка происходит после размещения футера внизу.
2) Chrome - он удивил «блуждающим скроллом» - к странице с периодом раз в секунду добавляются пустые пространства внизу - что-то неправильное происходит с расчётом высот. Лечится прописыванием html,body{height:100%} в юзерстили, но без гарантий, что всегда будет работать. Надёжнее - проверять, не превышает ли документ окно по высоте, и если не превышает, то двигать футер, иначе - ничего. С прыганием - всё в порядке, оно есть.
3) Опера - без прыжков (v. 12.02) при первой загрузке страницы, но поспешная перезагрузка может показать прыжок футера. В остальном ведёт не менее корректно, чем Fx.
Что же, придётся специально приучить Хром вести себя правильно (скриптом) и в таком виде выкатить версию на обозрение. Поэтому участок в юзерскрипте немного сложнее, чем приведённый в статье.
Надо напомнить, что это не полноценная реализация - не учитывает, например, случаи ресайза окна пользователем. Можно найти и редкие (на практике) сочетания изменяющихся высот футера до перемещения и после него, где логика начнёт давать сбои, не приводящие к неудобствам. Недостатки оставлены сознательно, потому что соблюдается баланс сложности доработки и временности решения.
В итоге, получилась вполне работоспособная схема работы, по крайней мере, для быстрых стационарных компьютеров. Если обнаружится неправильное поведение футера, настройку «underFooter» нужно отключить.
Если применять юзерстили ZenComment, они сильно сокращают необходимую высоту страницы, а юзерскрипт HabrAjax может не показывать некоторые или все боковые блоки в сайдбаре. Поэтому со скриптами и стилями заметно чаще наблюдается эффект неприбитого футера. Поэтому логично, что в HabrAjax исправление футера появилось впервые. Но и обычный сайт имеет ряд страниц, где прибитый футер был бы полезен.
Поведение сайта за последний год показывает, что разработчики (а значит, руководство) начали внедрять возможности, ранее существовавшие только в юзерскриптах и юзерстилях. Например, в начале года я написал , где собрал множество небольших пожеланий. Через полгода я вернулся к ней и с удовлетворением пометил (прямо в тексте; можно ознакомиться с «UPD» и датами), что целый ряд возможностей, описанных как пожелания, уже были внедрены в сайт.
Далее, посмотрим на «стрелочки» вместо квадратиков для оценивания комментариев. Они появились в юзерсилях almalexa («Prettifier») года 3 назад и переняты в ZenComment года 2 назад. Месяца 2-3 назад они появились на сайте. Начинает вериться в то, что через некоторое время стрелки разнесут на некоторое расстояние, как это сделано в ZenComment (одна стрелка слева от числа, вторая справа), чтобы меньше промахиваться. Добавить метки
Как прижать футер к низу страницы ? Этот вопросом задаются многие, кто сталкивался с версткой макетов для сайта. Дело в том, что если высота блоков в этих макетах не указана явно, то она зависит от количества их содержимого, соответственно, если этого содержимого достаточно мало, то весь макет может занимать высоту меньше чем окно браузера. Естественно выглядит все это не очень красиво. Сейчас я покажу вам несколько способов, которые позволят прижать футер к нижней части страницы и таким образом сделать макет более привлекательным и привычным.
В каждом из примеров будем отталкиваться от того, что макет сайта имеет такую обычную структуру (ваш макет может отличаться, но способы универсальные):
Далее для достижения необходимого результата к макету будут добавляться дополнительные блоки, свойства CSS и т.д. Однако в том макете, у которого вы решили прижать футер к низу страницы, эти блоки или некоторые свойства уже вполне могут присутствовать, так что добавлять их повторно не нужно. Все свойства CSS, которые непосредственно участвуют в прибивке футера к низу, снабжены комментариями.
В первом пункте было применено свойство CSS для указания минимальной высоты, которое не понимает Internet Explorer 6. Зато он понимает свойство как раз как минимальную высоту. Также этот браузер в определенных случаях игнорирует правило . Эти его две особенности и были использованы в данном примере для создания хака , чтобы заставить его делать то, что надо, не затрагивая другие браузеры.
Как и в первом примере, для IE6 здесь был применен специальный хак, позволяющий задать ему минимальную высоту.
Каждый специалист в области SEO знает, что без анализа вывести сайт в ТОП не получится. Аналитика поможет определить какое направление необходимо доработать. Существуют разные инструменты, позволяющие оценить ресурс, например, Яндекс.Метрика и Google Analytics. С их помощью владелец сайта может получить данные о посещаемости ресурса, источниках, посетителях и много другой полезной информации. Все данные предоставляются в форме отчетов.
Метрика в поисковой системе Яндекс – это сервис, созданный для проведения аналитики посещаемости ресурса и поведения интернет-пользователей. Сервис функционирует на бесплатной основе, поэтому пользуется большой популярностью.
Установив такой счетчик на своем сайте, вы будете получать развернутую информацию о «жизни» ресурса, оценивать результаты работы рекламы и вложенных в нее денежных средств.
Установить Метрику и привязать счетчик к рекламной компании можно самостоятельно.
Для того чтобы понимать данные, которые предоставляет сервис, важно знать и разбираться во внутренней терминологии используемой в Яндекс.Метрике:
Чем отличаются просмотры от визитов и посетителей? Предположим, что за неделю ресурс посетило 5 юзеров, причем один из них появлялся на сайте три дня из семи. Тогда просматривая статистику за неделю, мы увидим, что ресурс посетило всего 5 уникальных пользователей. Тот факт, что один из них заходил на сайт несколько раз, в отчете по посетителям не учитывается. А вот в отчете по визитам, как раз учитывается, значит, число визитов будет равно 8. Отчет по просмотрам показывает среднее число страниц, просматриваемое пользователями на данном ресурсе.
Рассмотрим наиболее полезные отчеты, представленные в Метрике:
Это далеко не все отчеты, которые вы сможете получить при использовании Яндекс.Метрики. Есть еще огромное количество полезных инструментов, которые помогут вам проанализировать ресурс с разных сторон.
Любой поисковик создан с одной целью – получение финансовой выгоды. Чем больше людей используют поисковую систему, тем больше денег получает компания. Именно поэтому для Яндекса важно предоставлять пользователям качественную выдачу, повышая тем самым свою популярность.
Получается, что поисковик постоянно ведет работы для выявления самого полезного сайта. Процесс этот выглядит примерно так: юзер вводит запрос в строку поиска – получает результаты – поочередно нажимает на каждый из них в поисках ответа на свой вопрос. Если через время пользователь снова возвращается к выдаче, то система автоматически воспринимает последний ресурс как некачественный, и он получает отказ в Яндекс.Метрике. А тот ресурс, после которого пользователь прекратил поиски по запросу, и остановился на нем, считается хорошим, по мнению Яндекса.
Таким образом, отказ в Метрике можно получить, если пользователь зашел на сайт и пробыл на нем меньше 15 секунд. Чем больше отказов получает сайт, тем менее качественным он считается, и получает больше шансов попасть под фильтры системы.
Рассмотрим влияние переходов на поведенческие факторы на простом примере: пользователь ввел запрос в поисковую строку – получил 10 результатов – зашел на каждую страницу в поисках ответа. Тот ресурс, который дал наиболее полный ответ и больше заинтересовал пользователя, является самым качественным по данному запросу.
Переходы на другие страницы выбранного ресурса положительно сказываются на поведенческом факторе. Только вот не совсем понятна взаимосвязь запросов юзера с переходами на другие страницы. Ведь, если пользователь зашел на сайт интернет-магазина с целью приобрести мобильный телефон, он будет «гулять» по страницам ресурса в поисках нужной модели, но не найдя его вновь обратится к поиску. Где в данном случае улучшение поведенческого фактора и решение вопроса юзера, не понятно. По этой причине показатель переходов в Метрики для многих считается ложным, и его можно смело опускать при оценке поведенческих факторов ресурса.
Поговорим о нюансах настройки Метрики:
Правильно настроенная Метрика поможет контролировать воронку продаж покажет, какие элементы требуют доработки, и проанализирует эффективность работы ресурса в целом.
В статье вы несколько раз встречали слово «Вебизор», давайте более подробно разберем, что же это такое.
Вебизор – это сервис, показывающий, что делают пользователи на сайте.
В нем можно увидеть следующие данные о каждом конкретном юзере:
Сервис дает возможность просмотреть ролик посещения, где видны все действия юзера (выделение текста, остановки и прочее).
Инструмент крайне полезный, только вот доступен он лишь клиентам Яндекса, регулярно «вливающим» в Яндекс.Директ более 10 тыс. рублей.
Выбрать между этими двумя сервисами один довольно трудно. Дело в том, что имеет одни из них, отсутствует в другом, и наоборот. По масштабу и возможностям они отличаются друг от друга, однако оба инструмента важны. Поэтому не стоит выбирать, а лучше использовать оба счетчика. Они прекрасно дополняют друг друга, и дают возможность получать массу полезной информации, с помощью которой вы сможете анализировать качество работы своего ресурса с абсолютно разных сторон.
Чтобы у Вас никогда не возникло вопроса, после или нескольких месяцев SEO-продвижения, как узнать эффективность, нужно заранее установить Яндекс.Метрику на сайт.
Кроме того, после установки Метрики, Яндекс будет собирать дополнительные сведения о Вашем сайте и его посетителях, таким образом, могут улучшиться позиции сайта в поисковых системах. Инструкция актуальна для 2019 года и учитывает все последние обновления Метрики. В общем одни плюсы, поэтому переходим от слов к делу.
Чтобы начать установку, зайдите на сайт metrika.yandex.ru , и авторизируйтесь через аккаунт в Яндексе. Если аккаунта нет, то просто зарегистрируйте новую почту, это займёт не больше минуты.
Шаг 1. После того, как Вы зашли на сайт Метрики, жмите «Добавить счётчик». Далее нужно определиться с названием счётчика. Если в дальнейшем проектов будет много, дабы не запутаться в них, лучше называть счётчик адресом сайта или названием компании.
Шаг 2. Укажите адрес сайта, на который устанавливается счётчик, часовой пояс в котором Вы находитесь или в котором удобнее получать данные.
Если необходимо собирать данные с поддоменов, нажмите плюсик рядом с пунктом «Дополнительные адреса» и добавьте адрес сайта на поддомене. Но лучше, для каждого поддомена создавать отдельный счётчик.
Шаг 3. Включаем сбор дополнительных данных о посещениях сайта. Вебвизор, карту скроллинга и аналитику форм на сайте. Переводим переключатель в положение «Вкл».
После, отмечаем галочку для принятия пользовательского соглашения (предварительно прочитайте его, открыв по ссылке). И кликаем кнопку «Создать счётчик».
Шаг 4. Дополнительные настройки. Откроется окно установки счётчика, где жмём на пункт «Дополнительные настройки».
Откроется список дополнительных настроек счётчика. Кратко рассмотрим, каждый из них.
Шаг 5. После этого, копируем код Метрики. Для этого нажимаем кнопку «Скопировать код» или выделяем код вручную и копируем нажатием комбинации клавиш «ctrl+c». Далее рассмотрим, как установить код Яндекс.Метрики на разные типы сайтов.
Вы получите код, который нужно разместить на всех страницах сайта, между тегами
. Для этого открываете файловую систему сайта на своём хостинге, находим все файлы страниц сайта. Если у вас одностраничный сайт, то скорее всего это файл index.htm l или index.php .Открываем файл для редактирования. Находим раздел
— он всегда в самом начале страницы. Ставим курсом и нажимаем вставить «ctrl+v».Сохраняем внесённые изменения.
Или любой другой CMS. В том случае, если Вы используете в качестве управления сайтом любую из популярных CMS, таких, как например WordPress или Joomla, процесс установки не будет отличаться коренным образом. А даже напротив немного упростится, потребуются только поверхностное понимание того, как устроен Ваш движок.
С помощью FTP-соединения или через файловый менеджер в административной панели, нужно отыскать файл отвечающий за заголовок страницы. Например, во всех темах на WordPress этот файл называется header.php, в котором собственно и находится раздел сайта, содержащий
. А далее всё просто — вставляете туда код счётчика. Плюс в том, что не нужно будет вставлять код в ручную на каждую страницу сайта, система управления сделает это за Вас.Поздравляем! Мы удачно разобрались с тем, как установить Яндекс Метрику на сайт, теперь Вы можете видеть всё, что происходит на Вашем сайте! А о том, , анализировать стандартные отчёты, настраивать цели и других способах работы с веб-аналитикой, мы расскажем в следующих публикациях.