Стартовая страница сайта — как витрина магазина или входная дверь, посмотрев на которую, человек решит войти внутрь и осмотреться или пойти дальше своей дорогой. К сожалению, иногда случается, что это первая и последняя страница для посетителя вашего сайта.

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

В современном обществе, когда все вокруг спешат и бегут по своим неотложным делам, время — один из самых ценных ресурсов. Современные пользователи не хотят тратить лишнее время на поиск нужной информации, разбираться в системе блоков и дополнительных меню, вникать в своеобразную логику разработчиков. У них есть выбор — щелчок по ссылке, быстро пробежать взглядом, нет ответа — следующий сайт. Предложений масса.

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

Главная страница сайта для вдохновения дизайнеров на новые подвиги — Creattica. Все ответы сразу доступны. Главная страница сайта для вдохновения дизайнеров на новые подвиги — Creattica. Все ответы сразу доступны
Настолько же информативная главная страница у сервис Squareup. Настолько же информативная главная страница у сервиса Squareup

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

Но в любой из этих ситуаций будут актуальны несколько основных правил.

Правило одного экрана

По статистике, около 90% пользователей при первом посещении не прокручивает страницу, то есть читает только то, что поместилось в область их экрана. Все ваши очень важные блоки, которые вы решили подвинуть ближе к подвалу в угоду другим, еще более важным, канули в Лету для этих посетителей!

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

К примеру, мы в свое время допустили подобный стратегический просчет — и теперь наши посетители видят название Студии, меню, большой-большой слайдер с последними работами и только если повезет — последние записи из блога.

Голубым показаны границы одного экрана у пользователей с разрешением экрана 1920x1080 — почти все нужное попало в кадр, чего не скажешь о наших посетителях с разрешением экрана 1366x768 (обозначено желтым) — они даже не увидят последних статей из блога :( Голубым показаны границы одного экрана у пользователей с разрешением 1920x1080 — почти все нужное попало в кадр, чего не скажешь о наших посетителях с разрешением экрана 1366x768 (обозначено желтым) — они даже не увидят последних статей из блога :(

Старайтесь помещать всю ключевую информацию в один экран. Не помещается? А нужна ли она вся? Скорее всего нет, тут главное правильно расставить приоритеты. А еще можно (и нужно) с удовольствием использовать решения типа контент-слайдеров, которые помогают в ограниченную площадь поместить большой объем информации.

Группирование информации

Еще одна из часто встречающихся проблем на сайтах в целом — разнесение одинаковой по сущности информации в разные, порой, невероятно отдаленные друг от друга места.

Если на вашем сайте отображается адрес e-mail, номер телефона, ссылка на группу «ВКонтакте» и логин skype — не стоит эти элементы разбрасывать по странице. Им лучше и уютнее будет вместе, обещаю вам! А если страшно, что будет излишнее нагромождение из информации — не беда, выберем один-два главных контакта, а остальные скроем в выпадающий/выезжающий/модальный или любой другой блок. Благо выбор велик.

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

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

Проверка на кроссбраузерность и кроссплатформенность

Ваш сайт должен одинаково хорошо выполнять свои функции как на 27-дюймовом мониторе в браузере Firefox, так и на смартфоне с Хромом или Opera Mini.

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

Например, у многих зарубежных разработчиков вошло в привычку верстать страницы только для браузеров на базе WebKit. Нет-нет, это не значит, что такой сайт не будет работать в других браузерах, но так как разработчики не указывают никаких вендорных префиксов, кроме –webkit-, то на сайте вы не увидите, например, красивых градиентов или анимации. (Что такое вендорные префиксы и не только — читайте в статье «Приправь свой сайт магией CSS3»)

Красивая кнопка в Хроме... но, постойте, во что она превратилась в Опере! Красивая кнопка в Хроме... но, постойте, во что она превратилась в Опере?!

А если изрядная доля привлекательности сайта заключалась как раз в этом? Грусть и печаль, посетитель посмотрит на ничем не примечательный сайт, не запомнит и не оценит его, а если не найдет нужной информации — хладнокровно закроет.

Заработало

Итак, как мы улучшили главную страницу сайта?

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

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